@font-face {
  font-family: "XQDisplay";
  src: url("../fonts/UTM-Netmuc-KT.ttf") format("truetype");
  font-display: swap;
}

:root {
  --xq-ink: #1c160f;
  --xq-paper: #f4dfaf;
  --xq-paper-strong: #ffe8ad;
  --xq-panel: rgba(39, 29, 18, 0.9);
  --xq-panel-soft: rgba(61, 45, 27, 0.76);
  --xq-border: rgba(255, 218, 141, 0.28);
  --xq-green: #77b300;
  --xq-green-dark: #3f6e10;
  --xq-red: #cf4b2c;
  --xq-gold: #f5c05a;
  --xq-muted: #d7c4a0;
  --xq-shadow: 0 16px 42px rgba(0, 0, 0, 0.32);
  /* Anchor for mobile-fixed elements (bottom nav, app-install, signup chip).
     Was previously hardcoded 92px in three places: body padding-bottom (line ~1683),
     .xq-footer margin-bottom (~1687), .xq-app-install base bottom (~907) and mobile
     bottom (~1704). Refactor into a single token so the signup chip can anchor to it
     without drifting when the bottom nav changes. */
  --xq-bottom-nav-height: 92px;
}

html {
  scroll-padding-top: 82px;
}

body.xq-app-body {
  position: relative;
  min-width: 320px;
  background:
    linear-gradient(180deg, rgba(18, 28, 16, 0.9), rgba(37, 25, 15, 0.86)),
    url("../images/app/app-bg.png") center top / cover fixed,
    #161b12;
  color: #f6ead4;
  overflow-x: hidden;
  isolation: isolate;
}

body.xq-app-body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 5%, rgba(255, 214, 120, 0.14), transparent 28rem),
    linear-gradient(90deg, rgba(7, 12, 7, 0.42), transparent 18%, transparent 82%, rgba(7, 12, 7, 0.42));
}

body.xq-app-body::after {
  content: "";
  position: fixed;
  inset: -18vh -16vw;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(112deg, transparent 12%, rgba(255, 232, 173, 0.075) 36%, transparent 58%),
    radial-gradient(ellipse at 76% 18%, rgba(216, 235, 191, 0.045), transparent 34%);
  mix-blend-mode: screen;
  opacity: 0.24;
  transform: translate3d(-7%, -2%, 0);
}

.xq-bg-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.xq-bg-ambient::before,
.xq-bg-ambient::after {
  content: "";
  position: absolute;
  pointer-events: none;
  will-change: transform;
}

.xq-bg-ambient::before {
  inset: -18vh -14vw;
  background:
    radial-gradient(ellipse at 24% 22%, rgba(255, 232, 173, 0.08), transparent 30%),
    linear-gradient(100deg, transparent 7%, rgba(216, 235, 191, 0.06) 28%, transparent 48%),
    linear-gradient(112deg, transparent 38%, rgba(246, 224, 173, 0.055) 54%, transparent 73%);
  mask-image: linear-gradient(112deg, transparent 0 7%, #000 24%, #000 74%, transparent 94%);
  opacity: 0.58;
  transform: translate3d(-2.4%, -0.8%, 0) rotate(-2deg);
}

.xq-bg-ambient::after {
  inset: -24vh -18vw;
  background:
    linear-gradient(180deg, transparent 0%, rgba(224, 238, 207, 0.035) 24%, transparent 46%, rgba(255, 232, 173, 0.024) 72%, transparent 100%),
    radial-gradient(ellipse at 52% 34%, rgba(224, 238, 207, 0.05), transparent 38%);
  mix-blend-mode: screen;
  opacity: 0.22;
  transform: translate3d(0, -4%, 0);
}

.xq-bg-rain {
  --rain-left: 10vw;
  --rain-delay: 0s;
  --rain-duration: 5.6s;
  --rain-height: 15vh;
  --rain-opacity: 0.24;
  --rain-drift: 15vw;
  --rain-tilt: -12deg;
  position: absolute;
  top: -24vh;
  left: var(--rain-left);
  width: 1px;
  height: var(--rain-height);
  background:
    linear-gradient(180deg, transparent, rgba(237, 245, 214, 0.1) 16%, rgba(237, 245, 214, 0.34) 48%, rgba(255, 232, 173, 0.07) 82%, transparent),
    linear-gradient(180deg, transparent 0 8%, rgba(255, 255, 255, 0.14) 48%, transparent 92%);
  border-radius: 999px;
  filter: blur(0.18px);
  opacity: 0;
  transform: translate3d(calc(var(--rain-drift) * -0.35), -18vh, 0) rotate(var(--rain-tilt));
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.xq-bg-rain--one {
  --rain-left: 7vw;
  --rain-delay: -1.8s;
  --rain-duration: 6.4s;
  --rain-height: 13vh;
  --rain-opacity: 0.18;
  --rain-drift: 12vw;
  --rain-tilt: -11deg;
}

.xq-bg-rain--two {
  --rain-left: 16vw;
  --rain-delay: -4.2s;
  --rain-duration: 5.1s;
  --rain-height: 18vh;
  --rain-opacity: 0.28;
  --rain-drift: 17vw;
  --rain-tilt: -13deg;
}

.xq-bg-rain--three {
  --rain-left: 24vw;
  --rain-delay: -0.7s;
  --rain-duration: 7.2s;
  --rain-height: 11vh;
  --rain-opacity: 0.16;
  --rain-drift: 10vw;
  --rain-tilt: -10deg;
}

.xq-bg-rain--four {
  --rain-left: 34vw;
  --rain-delay: -6s;
  --rain-duration: 5.8s;
  --rain-height: 17vh;
  --rain-opacity: 0.22;
  --rain-drift: 15vw;
  --rain-tilt: -12deg;
}

.xq-bg-rain--five {
  --rain-left: 43vw;
  --rain-delay: -2.6s;
  --rain-duration: 6.8s;
  --rain-height: 12vh;
  --rain-opacity: 0.17;
  --rain-drift: 11vw;
  --rain-tilt: -10deg;
}

.xq-bg-rain--six {
  --rain-left: 52vw;
  --rain-delay: -4.9s;
  --rain-duration: 4.9s;
  --rain-height: 20vh;
  --rain-opacity: 0.3;
  --rain-drift: 18vw;
  --rain-tilt: -14deg;
}

.xq-bg-rain--seven {
  --rain-left: 61vw;
  --rain-delay: -1.1s;
  --rain-duration: 7.6s;
  --rain-height: 14vh;
  --rain-opacity: 0.18;
  --rain-drift: 13vw;
  --rain-tilt: -11deg;
}

.xq-bg-rain--eight {
  --rain-left: 69vw;
  --rain-delay: -5.7s;
  --rain-duration: 5.5s;
  --rain-height: 19vh;
  --rain-opacity: 0.24;
  --rain-drift: 17vw;
  --rain-tilt: -13deg;
}

.xq-bg-rain--nine {
  --rain-left: 77vw;
  --rain-delay: -3.4s;
  --rain-duration: 6.1s;
  --rain-height: 10vh;
  --rain-opacity: 0.15;
  --rain-drift: 10vw;
  --rain-tilt: -10deg;
}

.xq-bg-rain--ten {
  --rain-left: 86vw;
  --rain-delay: -0.2s;
  --rain-duration: 5.2s;
  --rain-height: 16vh;
  --rain-opacity: 0.23;
  --rain-drift: 16vw;
  --rain-tilt: -12deg;
}

.xq-bg-rain--eleven {
  --rain-left: 92vw;
  --rain-delay: -6.8s;
  --rain-duration: 7s;
  --rain-height: 12vh;
  --rain-opacity: 0.16;
  --rain-drift: 12vw;
  --rain-tilt: -11deg;
}

.xq-bg-rain--twelve {
  --rain-left: 98vw;
  --rain-delay: -3.1s;
  --rain-duration: 5.9s;
  --rain-height: 18vh;
  --rain-opacity: 0.21;
  --rain-drift: 15vw;
  --rain-tilt: -12deg;
}

.xq-bg-leaf {
  --leaf-start-x: -12vw;
  --leaf-start-y: 0;
  --leaf-mid-x: 48vw;
  --leaf-mid-y: 8vh;
  --leaf-end-x: 112vw;
  --leaf-end-y: 18vh;
  --leaf-rotate: -10deg;
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 9px;
  border-radius: 100% 0 100% 0;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(186, 220, 142, 0.22) 42%, rgba(255, 232, 173, 0.1) 78%, transparent),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent);
  filter: blur(0.2px);
  opacity: 0;
  transform: translate3d(var(--leaf-start-x), var(--leaf-start-y), 0) rotate(var(--leaf-rotate));
  transform-origin: 70% 50%;
  will-change: transform, opacity;
}

.xq-bg-leaf--one {
  --leaf-start-y: 18vh;
  --leaf-mid-y: 24vh;
  --leaf-end-y: 30vh;
}

.xq-bg-leaf--two {
  --leaf-start-y: 38vh;
  --leaf-mid-y: 31vh;
  --leaf-end-y: 30vh;
  --leaf-rotate: 14deg;
  width: 24px;
}

.xq-bg-leaf--three {
  --leaf-start-y: 62vh;
  --leaf-mid-y: 69vh;
  --leaf-end-y: 72vh;
  --leaf-rotate: -18deg;
  width: 34px;
}

.xq-bg-leaf--four {
  --leaf-start-y: 78vh;
  --leaf-mid-y: 72vh;
  --leaf-end-y: 66vh;
  --leaf-rotate: 9deg;
  width: 22px;
}

.xq-app-main {
  position: relative;
  z-index: 1;
  width: 100%;
}

body.modal-open .xq-app-main {
  z-index: auto;
}

.xq-shell {
  /* 1320px cap matches the real-user desktop distribution from GA4:
       1920×1080 = 52% of real desktop traffic (capped at 1320, ~300px breathing
       room each side — looks balanced, not stretched)
       1366×768  = 14% (gets ~1318 usable, fills the screen comfortably)
       1280×720  = 6%  (gets ~1232 usable, still fills)
     See docs/web-auth-prominence-plan.md for the source GA4 query. */
  max-width: 1320px;
  padding-top: 0.75rem;
  padding-bottom: 2rem;
}

a {
  color: #aee26b;
}

a:hover,
a:focus {
  color: #d8ff9d;
}

.text-muted {
  color: var(--xq-muted) !important;
}

.text-warning,
.info {
  color: var(--xq-gold) !important;
}

.text-success {
  color: #9be05d !important;
}

.btn {
  border-radius: 0.85rem;
}

.btn-success,
.xq-primary-btn {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 238, 172, 0.32);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent),
    linear-gradient(180deg, #8dca1f, #52870d);
  color: #10190b !important;
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.24);
  box-shadow: 0 10px 22px rgba(34, 74, 10, 0.24);
}

.btn-success::after,
.xq-primary-btn::after {
  content: "";
  position: absolute;
  inset: -50% -35%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.44) 48%, transparent 58%);
  opacity: 0;
  transform: translate3d(-55%, 0, 0);
}

.btn-success:hover,
.btn-success:focus,
.xq-primary-btn:hover,
.xq-primary-btn:focus {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent),
    linear-gradient(180deg, #9edd2e, #5c9412);
  color: #0f1709 !important;
}

.btn-success:active,
.xq-primary-btn:active {
  transform: translateY(1px) scale(0.99);
}

.btn-primary {
  border-color: rgba(255, 224, 154, 0.28);
  background: linear-gradient(180deg, #e2ad48, #96671f);
  color: #1b1309;
  font-weight: 800;
}

.btn-primary:hover,
.btn-primary:focus {
  border-color: rgba(255, 238, 188, 0.5);
  background: linear-gradient(180deg, #f0bd5b, #a97625);
  color: #1b1309;
}

.btn-secondary,
.btn-info {
  border-color: rgba(255, 224, 154, 0.25);
  background: rgba(255, 242, 205, 0.12);
  color: #fff4d6;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-info:hover,
.btn-info:focus,
.btn-info.active {
  border-color: rgba(255, 224, 154, 0.46);
  background: rgba(245, 192, 90, 0.25);
  color: #fff7df;
}

.card,
.list-group-item,
.modal-content,
.dropdown-menu,
.pagination .page-link {
  border-color: var(--xq-border);
  background: var(--xq-panel);
  color: #f6ead4;
  box-shadow: var(--xq-shadow);
}

.pagination .page-link {
  border-radius: 999px;
  padding: 0.65rem 1.2rem;
}

/* Site-wide pinned-top announcement banner. Lives directly inside
   <main class="xq-app-main"> above the nav; participates in normal page
   flow (no fixed position) so the rest of the layout reflows when it's
   dismissed. Dismiss persistence is in _UpgradeAnnouncement.cshtml. */
.xq-announcement {
  position: relative;
  z-index: 3;
  border-bottom: 1px solid rgba(255, 224, 154, 0.22);
  background:
    linear-gradient(120deg, rgba(119, 179, 0, 0.22), rgba(245, 192, 90, 0.18) 60%, rgba(207, 75, 44, 0.14));
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  color: #fff7df;
}

.xq-announcement__inner {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0.6rem 1rem;
}

.xq-announcement__icon {
  flex-shrink: 0;
  font-size: 1.15rem;
  line-height: 1;
}

.xq-announcement__text {
  flex: 1;
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.5;
}

.xq-announcement__text--short {
  display: none;
}

.xq-announcement__text--long {
  display: inline;
}

.xq-announcement__text a {
  color: #aee26b;
  font-weight: 700;
  text-decoration: underline;
}

.xq-announcement__text a:hover,
.xq-announcement__text a:focus {
  color: #ceff95;
}

.xq-announcement__close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(255, 224, 154, 0.32);
  border-radius: 999px;
  background: rgba(8, 12, 8, 0.42);
  color: #fff7df;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.xq-announcement__close:hover,
.xq-announcement__close:focus {
  background: rgba(8, 12, 8, 0.7);
  border-color: rgba(255, 224, 154, 0.6);
  color: #ffe8a0;
  outline: none;
}

@media (max-width: 575.98px) {
  .xq-announcement__inner {
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
  }

  .xq-announcement__text {
    font-size: 0.82rem;
    line-height: 1.35;
  }

  .xq-announcement__text--long {
    display: none;
  }

  .xq-announcement__text--short {
    display: inline;
  }

  .xq-announcement__icon {
    font-size: 1rem;
  }

  .xq-announcement__close {
    width: 32px;
    height: 32px;
    font-size: 1.2rem;
  }
}

/* Result modal (game-end). Themed to match the home page's bamboo / ink /
   gold xq-2026 palette so the end-of-game beat doesn't crash out into a
   plain Bootstrap rectangle. Structure (title + score lines + Đóng /
   Chơi lại) stays the same; the dressing changes. */
.xq-result-dialog {
  /* Override Bootstrap's flat width: let the dialog size to content with
     a comfortable cap. The inline width hints in Game.cshtml are kept
     only as a defensive min-width fallback. */
  max-width: 360px;
  margin-top: 80px;
}

.xq-result-content {
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(243, 189, 127, 0.12), transparent 70%),
    linear-gradient(180deg, rgba(57, 38, 20, 0.985), rgba(20, 14, 9, 0.995)),
    #1a1209;
  border: 1px solid rgba(243, 189, 127, 0.32);
  border-radius: 20px;
  color: #fff4d6;
  overflow: hidden;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 238, 188, 0.22);
}

/* Hairline gold divider at the top edge of the modal — matches the
   "premium divider" pattern used on the home page (.xq-store-cta). */
.xq-result-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background-image: linear-gradient(90deg, transparent, rgba(243, 189, 127, 0.55) 50%, transparent);
  pointer-events: none;
}

.xq-result-content .modal-header {
  border-bottom: 1px dashed rgba(243, 189, 127, 0.18);
  padding: 22px 22px 12px;
}

.xq-result-content .modal-title {
  font-family: 'XQDisplay', Georgia, serif;
  font-size: 32px;
  line-height: 1;
  color: var(--xq2026-heading, #fff1c3);
  letter-spacing: 0.01em;
  margin: 0;
}

.xq-result-content .modal-title.text-success {
  color: var(--xq2026-primary-bright, #92cf2c) !important;
  text-shadow: 0 0 24px rgba(146, 207, 44, 0.28);
}

.xq-result-content .modal-title.text-danger {
  color: #ff7a6f !important;
  text-shadow: 0 0 24px rgba(255, 122, 111, 0.22);
}

.xq-result-content .modal-body {
  padding: 16px 22px 10px;
  font-size: 15px;
  color: var(--xq2026-text, #f6ead4);
}

.xq-result-content .modal-body p {
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(255, 218, 141, 0.1);
}

.xq-result-content .modal-body p:last-child {
  border-bottom: 0;
}

.xq-result-content .modal-body strong {
  font-weight: 600;
  color: var(--xq2026-gold-muted, #E9D1A3);
}

.xq-result-player {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  line-height: 1.25;
  overflow: hidden;
}

.xq-result-player strong {
  font-size: 15px;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xq-result-side {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--xq2026-text-mute, #8b8270);
}

.xq-result-score {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 17px;
  font-weight: 700;
  flex-shrink: 0;
}

.xq-result-content .modal-body .text-success {
  color: var(--xq2026-primary-bright, #92cf2c) !important;
  font-weight: 700;
}

.xq-result-content .modal-body .text-danger {
  color: #ff7a6f !important;
  font-weight: 700;
}

.xq-result-content .modal-footer {
  border-top: 0;
  padding: 12px 22px 22px;
  gap: 10px;
  /* keep buttons clickable above the radial-glow pseudo */
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

.xq-result-close,
.xq-result-rematch,
.xq-result-dismiss {
  pointer-events: auto;
}

.xq-result-close {
  background: rgba(20, 14, 9, 0.7);
  border: 1px solid rgba(243, 189, 127, 0.32);
  color: var(--xq2026-text-dim, #c9bea7);
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.xq-result-close:hover,
.xq-result-close:focus {
  background: rgba(243, 189, 127, 0.08);
  border-color: rgba(243, 189, 127, 0.5);
  color: var(--xq2026-text, #f6ead4);
}

.xq-result-rematch {
  background: linear-gradient(180deg, #92cf2c, #6fa423);
  border: 0;
  color: #0a1505;
  font-weight: 800;
  padding: 8px 22px;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(146, 207, 44, 0.32);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.xq-result-rematch:hover,
.xq-result-rematch:focus {
  background: linear-gradient(180deg, #9fdc36, #79b327);
  color: #0a1505;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(146, 207, 44, 0.42);
}

.xq-result-dismiss {
  filter: invert(1) opacity(0.7);
  transition: filter 0.15s ease;
}

.xq-result-dismiss:hover,
.xq-result-dismiss:focus {
  filter: invert(1) opacity(1);
}

/* Subtle entrance — Bootstrap's fade is replaced with a soft scale-in. */
.xq-result-modal.fade .xq-result-dialog {
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.22s ease;
  transform: translateY(8px) scale(0.96);
  opacity: 0;
}

.xq-result-modal.show .xq-result-dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.xq-top-nav {
  position: relative;
  z-index: 2;
  min-height: 72px;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 224, 154, 0.18) !important;
  background: rgba(15, 21, 13, 0.78);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  /* backdrop-filter intentionally NOT set here. Per CSS Backdrop Filter
     spec, any non-none backdrop-filter creates a containing block for
     position:fixed descendants — and the Bootstrap mobile offcanvas
     (#offcanvas-navbar) is a position:fixed child of .xq-top-nav. With
     blur(14px) on the nav, the offcanvas resolved its top/right/bottom
     against the 41px-tall nav instead of the viewport, collapsing into
     a 40px bar that hid every menu item. The blur is moved to the
     ::before pseudo below so the frosted-glass look survives without
     hijacking the offcanvas containing block. */
}
.xq-top-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events: none;
  z-index: -1;
}

.xq-top-nav .navbar-brand {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding-top: 0;
  padding-bottom: 0;
}

.xq-top-nav .navbar-brand .logo {
  background-position: center;
  background-size: contain;
}

.xq-top-nav .navbar-toggler {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0.35rem 0.5rem;
  border-color: rgba(255, 224, 154, 0.28);
}

.xq-top-nav .nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding-top: 0;
  padding-bottom: 0;
  border-radius: 999px;
  color: #f2dfbc;
  font-weight: 700;
  padding-right: 0.9rem;
  padding-left: 0.9rem;
  /* Prevent VN nav labels from wrapping to two lines at tight desktop widths
     (Trang chủ, Trận đấu would otherwise break mid-word at ~1280px after the
     new auth cluster widened the right side of the nav). */
  white-space: nowrap;
}

.xq-top-nav .nav-link.active,
.xq-top-nav .nav-link:hover,
.xq-top-nav .nav-link:focus {
  background: rgba(119, 179, 0, 0.18);
  color: #ffffff;
}

@media (min-width: 992px) {
  .xq-top-nav .offcanvas-body,
  .xq-top-nav .navbar-nav,
  .xq-top-nav .nav-item {
    align-items: center;
  }

  .xq-top-nav .nav-item {
    display: flex;
  }
}

.xq-offcanvas {
  background: rgba(24, 28, 18, 0.96);
  color: #f6ead4;
}

/* Constrain offcanvas width ONLY when it's actually rendering as an offcanvas
   (mobile burger menu). Above the lg breakpoint Bootstrap auto-expands the
   offcanvas inline as a normal flex row; the 390px max-width would otherwise
   squeeze the inline nav into a tiny right-side strip and push the auth CTAs
   off-viewport. */
@media (max-width: 991.98px) {
  .xq-offcanvas {
    max-width: min(88vw, 390px);
  }

  /* The offcanvas is nested inside .xq-top-nav, which has its own stacking
     context for the frosted nav treatment. Promote that context only while
     the drawer is open so Bootstrap's panel clears the announcement banner. */
  .xq-top-nav:has(.xq-offcanvas.show),
  .xq-top-nav:has(.xq-offcanvas.showing) {
    z-index: 1055;
    border-bottom-color: transparent !important;
    background: transparent;
    box-shadow: none;
  }

  .xq-top-nav:has(.xq-offcanvas.show)::before,
  .xq-top-nav:has(.xq-offcanvas.showing)::before {
    opacity: 0;
  }

  .xq-top-nav:has(.xq-offcanvas.show) > .xq-top-nav__inner > .navbar-brand,
  .xq-top-nav:has(.xq-offcanvas.showing) > .xq-top-nav__inner > .navbar-brand,
  .xq-top-nav:has(.xq-offcanvas.show) > .xq-top-nav__inner > .d-lg-none,
  .xq-top-nav:has(.xq-offcanvas.showing) > .xq-top-nav__inner > .d-lg-none {
    visibility: hidden;
  }

  .xq-top-nav .xq-offcanvas {
    z-index: 1056;
    visibility: visible;
  }

  body:has(.xq-offcanvas.show) .xq-bottom-nav,
  body:has(.xq-offcanvas.showing) .xq-bottom-nav,
  body:has(.xq-offcanvas.show) .xq-app-install,
  body:has(.xq-offcanvas.showing) .xq-app-install,
  body:has(.xq-offcanvas.show) .xq-app-install-scrim,
  body:has(.xq-offcanvas.showing) .xq-app-install-scrim,
  body:has(.xq-offcanvas.show) .xq-signup-chip,
  body:has(.xq-offcanvas.showing) .xq-signup-chip,
  body:has(.xq-offcanvas.show) .xq-signup-chip__dismiss,
  body:has(.xq-offcanvas.showing) .xq-signup-chip__dismiss {
    opacity: 0;
    pointer-events: none;
  }
}

/* Scope the unscoped hide-rule to the navbar's collapsed range. Without the
   media query this rule overrode Bootstrap's default expand-lg behavior and
   collapsed the auth CTAs to a 0×0 box on desktop. Matches navbar-expand-lg
   in _Nav.cshtml (collapsed below 992px). */
@media (max-width: 991.98px) {
  .xq-offcanvas:not(.show):not(.showing) {
    display: none;
  }
}

.xq-bottom-nav {
  position: fixed;
  right: 12px;
  bottom: 10px;
  left: 12px;
  z-index: 1030;
  display: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
  min-height: 68px;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(255, 224, 154, 0.22);
  border-radius: 1.1rem;
  background:
    linear-gradient(180deg, rgba(16, 24, 12, 0.86), rgba(44, 30, 18, 0.92)),
    url("../images/app/bottom-bar-bg.png") center / 100% 100% no-repeat;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(10px);
}

.xq-bottom-nav__item {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  border-radius: 0.75rem;
  color: #f4dfaf;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
}

.xq-bottom-nav__item img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  transition: transform 0.2s ease;
}

.xq-bottom-nav__item.active,
.xq-bottom-nav__item:hover,
.xq-bottom-nav__item:focus {
  background: rgba(255, 231, 160, 0.13);
  color: #ffffff;
}

.xq-bottom-nav__item:active img {
  transform: translateY(1px) scale(0.94);
}

.xq-page-title {
  display: inline-flex;
  align-items: center;
  min-height: 54px;
  margin: 0 0 0.75rem;
  padding: 0.15rem 1rem 0.25rem;
  background: url("../images/app/screen-title.png") center / 100% 100% no-repeat;
  color: #fff4d1;
  font-family: XQDisplay, Georgia, serif;
  font-size: clamp(1.65rem, 4vw, 2.7rem);
  font-weight: 400;
  letter-spacing: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

.xq-kicker {
  color: #e1bd70;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.xq-lead {
  max-width: 60rem;
  margin-bottom: 1rem;
  color: #eadabd;
  font-size: 1rem;
}

.xq-panel {
  position: relative;
  border: 1px solid var(--xq-border);
  border-radius: 1.25rem;
  background:
    linear-gradient(180deg, rgba(255, 239, 194, 0.11), rgba(255, 255, 255, 0.02)),
    var(--xq-panel);
  box-shadow: var(--xq-shadow);
}

.xq-hero-grid {
  display: grid;
  /* Hero takes whatever's left; the "live activity" sidebar is capped 300-380px
     so it never bloats to half the screen at 1920×1080 (52% of real desktop).
     Old ratio 1.06fr/0.94fr produced a ~620px right column at 1320px shell —
     way too much for empty-state cards. New layout:
       1920px viewport (capped 1320 shell): hero 924, sidebar 380
       1366px viewport (full ~1318):       hero 922, sidebar 380
       1280px viewport (full ~1232):       hero 836, sidebar 380 */
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: 1rem;
  align-items: start;
}

.xq-play-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(1rem, 3vw, 1.55rem);
  /* Premium carved-depth — a barely-there top inner glow that catches
     light like the inside of a lacquer box. Combined with the lighter
     gradient hairlines below, sections feel "sculpted into" the card
     rather than "drawn on top". 1px highlight + 2px shadow inverted
     reads as bevel without looking skeuomorphic. */
  box-shadow:
    inset 0 1px 0 rgba(255, 239, 194, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    var(--xq-shadow);
}

.xq-play-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.09), transparent 34%),
    linear-gradient(290deg, transparent 62%, rgba(119, 179, 0, 0.1));
  opacity: 0.75;
}

/* Decorative xiangqi-board "rain curtain" in the bottom-right corner.
   Earlier iteration used a full crosshatch (horizontal + vertical) but
   that read as "graph paper" and crowded the card with horizontal lines
   competing against the section dividers. Reworked to:
   - vertical lines ONLY (the wuxia "rain" / "board file" feel)
   - opacity halved (0.10 → 0.05) for a whisper-thin etch
   - elliptical mask widened in the long axis so it tapers gracefully
   - radial fade pushed outward so the corner is the dominant focus */
.xq-play-panel::after {
  content: "";
  position: absolute;
  right: -100px;
  bottom: -100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background:
    repeating-linear-gradient(90deg, rgba(255, 224, 154, 0.05) 0 1px, transparent 1px 32px);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 25%, transparent 78%);
          mask-image: radial-gradient(ellipse at center, #000 25%, transparent 78%);
  pointer-events: none;
  z-index: 0;
}

.xq-play-panel h1 {
  position: relative;
  z-index: 1;
  margin: 0.2rem 0 0.35rem;
  color: #fff1c3;
  font-family: XQDisplay, Georgia, serif;
  font-size: clamp(2rem, 6vw, 3.4rem);
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: 0;
  text-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
}

.xq-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 34rem;
  margin: 0 auto 1rem;
  color: #eadabd;
}

.xq-variant-tabs {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  max-width: 520px;
  margin: 1rem auto;
}

.xq-variant-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 226, 156, 0.18);
  border-radius: 1rem;
  background: rgba(18, 23, 14, 0.68);
  color: #f6ead4;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.xq-variant-card input {
  position: absolute;
  pointer-events: none;
  opacity: 0;
}

.xq-variant-card img {
  display: block;
  width: 100%;
  aspect-ratio: 24 / 17;
  object-fit: contain;
  object-position: center;
  opacity: 1;
  transition: transform 0.35s ease;
}

.xq-variant-card::after {
  content: "";
  display: none;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 52%;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.72));
  pointer-events: none;
}

.xq-variant-card span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.xq-variant-card.active,
.xq-variant-card:has(input:checked) {
  border-color: rgba(166, 226, 75, 0.82);
  box-shadow:
    0 0 0 2px rgba(119, 179, 0, 0.24),
    0 14px 26px rgba(0, 0, 0, 0.25);
}

.xq-variant-card:active {
  transform: translateY(1px) scale(0.99);
}

.xq-action-row {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 0.75rem;
}

.xq-primary-action,
.xq-secondary-actions {
  display: flex;
  justify-content: center;
  gap: 0.65rem;
  width: 100%;
}

.xq-secondary-actions {
  flex-wrap: wrap;
}

.play-controls .play-btn {
  width: min(100%, 340px);
  max-width: 340px;
  min-height: 52px;
  font-size: 1.05rem;
}

.play-controls .play-sm {
  min-width: 104px;
  min-height: 34px;
  padding-right: 0.9rem;
  padding-left: 0.9rem;
}

.xq-store-cta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.15rem;
  padding-top: 1.1rem;
  /* Premium divider — center-fade hairline (taper to transparent at both
     ends) instead of a flat edge-to-edge border. Roughly the pattern
     luxury brand sites use (Apple, Hermès) to separate sections without
     visual crowding. Half a pixel rendered at 1px height keeps it
     whisper-thin even on retina. */
  border-top: 0;
  background-image: linear-gradient(90deg, transparent, rgba(255, 224, 154, 0.14) 50%, transparent);
  background-position: top center;
  background-size: 70% 1px;
  background-repeat: no-repeat;
}

.xq-store-cta a {
  /* The badges have different native aspect ratios, so lock their visual
     height and let each badge keep its natural width. */
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  height: 44px;
  margin-top: 0 !important;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.xq-store-cta a.d-block {
  display: inline-flex !important;
}

.xq-store-cta a:hover,
.xq-store-cta a:focus {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.xq-store-cta img {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

/* ============================================================
   App-install prompt (premium polish)
   First-class invitation feel: large halo'd icon, display-serif
   title, concrete benefit chips, social proof, single dominant
   CTA with sheen sweep. Replaces the prior cramped Bootstrap-y
   notice. Triggered on mobile via the JS in Index.cshtml after
   a 700ms post-load delay. Scoped entirely to .xq-app-install*.
   ============================================================ */
.xq-app-install {
  position: fixed;
  right: 12px;
  bottom: var(--xq-bottom-nav-height);
  left: 12px;
  z-index: 1031;
  width: min(calc(100vw - 24px), 480px);
  margin: 0 auto;
  padding: 1.05rem 1.15rem 1.05rem 1.15rem;
  border: 1px solid rgba(255, 224, 154, 0.34);
  border-radius: 18px;
  background:
    /* faint warm light bloom at top-right */
    radial-gradient(120% 80% at 100% 0%, rgba(255, 208, 116, 0.10), transparent 55%),
    /* dark wood frosted base */
    linear-gradient(140deg, rgba(28, 36, 22, 0.97), rgba(56, 36, 18, 0.96)),
    url("../images/app/bottom-bar-bg.png") center / cover no-repeat;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),       /* lift */
    0 2px 0 rgba(255, 232, 178, 0.06) inset, /* top hairline */
    0 -2px 0 rgba(0, 0, 0, 0.4) inset;     /* bottom seal */
  color: #fff4d6;
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px) scale(0.97);
  transition:
    opacity 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 0.95rem;
  overflow: hidden;
}

.xq-app-install[hidden] { display: none !important; }
.xq-app-install.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* Soft scrim — dims page behind the prompt without blocking it.
   Tappable, dismisses prompt + itself. Apple/Google bottom-sheet
   pattern (NOT a fullscreen interstitial — keeps Google's mobile
   intrusive-interstitial penalty off the table). */
.xq-app-install-scrim {
  position: fixed;
  inset: 0;
  z-index: 1030;            /* one below the prompt (1031) */
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: saturate(0.85) blur(1px);
  -webkit-backdrop-filter: saturate(0.85) blur(1px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.xq-app-install-scrim[hidden] { display: none !important; }
.xq-app-install-scrim.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Small foil-gold "Miễn phí" chip — replaces the diagonal ribbon that
   was overlapping the app icon. Sits inline next to the eyebrow text. */
.xq-app-install__free {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 7px 2.5px;
  border-radius: 999px;
  background: linear-gradient(135deg, #d9b66a 0%, #f3d77a 50%, #b48a36 100%);
  color: #2a1d0a;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Icon column — wrap holds the halo behind the logo */
.xq-app-install__icon-wrap {
  position: relative;
  width: 60px;
  height: 60px;
  align-self: start;
}
.xq-app-install__icon {
  position: relative;
  z-index: 1;
  width: 60px;
  height: 60px;
  border-radius: 14px;
  border: 1px solid rgba(255, 224, 154, 0.30);
  background: rgba(255, 244, 214, 0.06);
  object-fit: cover;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5) inset,
    0 8px 20px rgba(0, 0, 0, 0.35);
}
.xq-app-install__icon-halo {
  position: absolute;
  inset: -6px;
  border-radius: 20px;
  background: radial-gradient(circle at center, rgba(243, 215, 122, 0.45), transparent 70%);
  animation: xqAppInstallHalo 2.6s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}
@keyframes xqAppInstallHalo {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%      { opacity: 0.70; transform: scale(1.06); }
}

.xq-app-install__body { min-width: 0; }

.xq-app-install__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0.25rem;
  color: rgba(243, 215, 122, 0.90);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}
.xq-app-install__eyebrow .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #92cf2c;
  box-shadow: 0 0 6px rgba(146, 207, 44, 0.7);
}

.xq-app-install h2 {
  margin: 0 0 0.5rem;
  color: #fff1c3;
  font-family: 'XQDisplay', Georgia, serif;
  font-size: 1.28rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.005em;
}

/* Benefit chips — concrete value props with icons */
.xq-app-install__benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.4rem;
  margin: 0 0 0.55rem;
  padding: 0;
  list-style: none;
}
.xq-app-install__benefits li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 7px;
  border-radius: 999px;
  background: rgba(255, 244, 214, 0.06);
  border: 1px solid rgba(255, 224, 154, 0.16);
  color: rgba(246, 234, 212, 0.92);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.xq-app-install__benefits .fa {
  font-size: 0.65rem;
  color: rgba(146, 207, 44, 0.95);
}

/* Social proof — stars + rating + downloads */
.xq-app-install__proof {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 0.7rem;
  color: rgba(246, 234, 212, 0.75);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1;
}
.xq-app-install__proof .stars {
  color: #f3d77a;
  letter-spacing: 0.05em;
  font-size: 0.85rem;
  text-shadow: 0 0 6px rgba(243, 215, 122, 0.35);
}
.xq-app-install__proof .rating {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  color: #fff1c3;
}
.xq-app-install__proof .dot-sep {
  color: rgba(246, 234, 212, 0.35);
  margin: 0 1px;
}
.xq-app-install__proof .downloads { font-weight: 500; }

.xq-app-install__actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

/* Primary install CTA — premium pill with sheen on hover */
.xq-app-install__install {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-height: 44px;
  padding: 0 1.05rem;
  border-radius: 12px;
  border: 0;
  background:
    linear-gradient(180deg, #a8df3d 0%, #92cf2c 55%, #6ea61f 100%);
  color: #11200a;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -2px 0 rgba(0, 0, 0, 0.20),
    0 10px 24px rgba(63, 110, 16, 0.42);
  overflow: hidden;
  transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.18s ease;
}
.xq-app-install__install:hover,
.xq-app-install__install:focus {
  color: #0b1406;
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -2px 0 rgba(0, 0, 0, 0.22),
    0 14px 30px rgba(63, 110, 16, 0.50);
}
.xq-app-install__install:active { transform: translateY(1px); }
.xq-app-install__install::before {
  /* Sheen sweep — runs on entrance once, then on hover */
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 50%;
  height: 100%;
  background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);
  transform: skewX(-18deg);
  pointer-events: none;
}
.xq-app-install.is-visible .xq-app-install__install::before {
  animation: xqInstallSheen 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.5s 1;
}
.xq-app-install__install:hover::before {
  animation: xqInstallSheen 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes xqInstallSheen {
  from { left: -60%; }
  to   { left: 130%; }
}
.xq-app-install__install .install-icon { font-size: 0.85rem; }
.xq-app-install__install .install-label { line-height: 1; }
.xq-app-install__install .install-arrow {
  font-size: 1.1rem;
  margin-left: 1px;
  transition: transform 0.18s ease;
}
.xq-app-install__install:hover .install-arrow { transform: translateX(3px); }

/* Secondary "Để sau" — text-only, no button competing with primary */
.xq-app-install__later {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: rgba(246, 234, 212, 0.55);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: color 0.15s ease;
}
.xq-app-install__later:hover,
.xq-app-install__later:focus {
  color: rgba(246, 234, 212, 0.92);
  text-decoration: underline;
  text-decoration-color: rgba(243, 215, 122, 0.55);
  text-underline-offset: 3px;
}

/* Close (×) — top-right corner */
.xq-app-install__close {
  position: absolute;
  top: 10px; right: 10px;
  width: 28px;
  height: 28px;
  min-height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 224, 154, 0.16);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.20);
  color: rgba(246, 234, 212, 0.68);
  font-size: 0.78rem;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  z-index: 2;
}
.xq-app-install__close:hover,
.xq-app-install__close:focus {
  border-color: rgba(255, 224, 154, 0.42);
  background: rgba(0, 0, 0, 0.40);
  color: #ffffff;
}

.xq-live-stack {
  display: grid;
  gap: 1rem;
}

.xq-side-card,
.top-box,
.xq-feed-card {
  border: 1px solid var(--xq-border);
  border-radius: 1rem;
  background:
    linear-gradient(180deg, rgba(255, 238, 186, 0.1), rgba(255, 255, 255, 0.02)),
    rgba(35, 29, 20, 0.86);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24);
}

.xq-side-card,
.xq-feed-card {
  padding: 0.95rem;
}

.xq-section-title,
.top-box h6,
.xq-side-card h5,
.xq-feed-card h2,
.xq-feed-card h5 {
  margin: 0 0 0.75rem;
  color: #ffdfa0;
  font-size: 1rem;
  font-weight: 900;
}

.xq-feed {
  display: grid;
  gap: 0.55rem;
  margin: 0;
}

.xq-feed li {
  min-width: 0;
  margin: 0;
  padding: 0.62rem 0.7rem;
  border: 1px solid rgba(255, 224, 154, 0.14);
  border-radius: 0.8rem;
  background: rgba(10, 16, 9, 0.32);
  color: #eadabd;
  line-height: 1.35;
}

.xq-feed a:last-child {
  display: inline-flex;
  margin-left: 0.35rem;
  color: #ffe6a8;
  font-weight: 800;
}

.xq-empty-state {
  margin: 0;
  padding: 0.7rem 0.75rem;
  border: 1px dashed rgba(255, 224, 154, 0.2);
  border-radius: 0.8rem;
  background: rgba(10, 16, 9, 0.22);
  color: var(--xq-muted);
}

.xq-answer-card {
  margin-top: 1rem;
  padding: 1rem;
  color: #eadabd;
}

.xq-answer-card p:last-child {
  margin-bottom: 0;
}

.xq-board-stage {
  padding: 0.75rem;
}

.xq-board-stage .xq-board-wrap {
  display: block;
  width: min(100%, 440px);
  min-width: 0;
  margin-right: auto;
  margin-left: auto;
  border-radius: 0.8rem;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
}

.xq-board-stage .xq-board {
  border-radius: 0.55rem;
}

.xq-player {
  min-width: 0;
  color: #ffe8ad;
}

.xq-board-stage .xq-player {
  display: flex;
  justify-content: center;
  min-height: 28px;
  margin: 0.15rem 0;
  padding: 0.35rem 0.65rem;
  border: 1px solid rgba(255, 224, 154, 0.18);
  border-radius: 999px;
  background: rgba(20, 28, 13, 0.54);
}

.xq-board-stage .xq-player .name {
  float: none;
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xq-mode-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.xq-mode-toolbar .xq-variant-tabs {
  width: 100%;
  max-width: 100%;
  margin: 0;
}

.xq-match-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.xq-match-column {
  display: grid;
  align-content: start;
  gap: 1rem;
}

.xq-match-card {
  display: grid;
  grid-template-columns: clamp(108px, 32vw, 160px) minmax(0, 1fr);
  gap: 0.85rem;
  overflow: hidden;
  padding: 0.75rem;
  border: 1px solid rgba(255, 224, 154, 0.19);
  border-radius: 1rem;
  background:
    linear-gradient(180deg, rgba(255, 239, 194, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(31, 27, 19, 0.9);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24);
}

.xq-match-card__board {
  display: block;
  min-width: 0;
  overflow: hidden;
  border-radius: 0.75rem;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.22);
}

.xq-match-card__meta {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 0.55rem;
}

.xq-match-card__stamp {
  overflow: hidden;
  color: var(--xq-muted);
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xq-match-card__player {
  min-width: 0;
}

.xq-match-card__name-row {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.xq-match-card__name {
  min-width: 0;
  overflow: hidden;
  color: #fff2c7;
  font-size: 0.96rem;
  font-weight: 900;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.xq-match-card__score {
  flex: 0 0 auto;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: rgba(255, 224, 154, 0.1);
  color: #ffd77b;
  font-size: 0.78rem;
  font-weight: 800;
}

.xq-match-card__vs {
  color: #d8bd82;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.xq-puzzle-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.xq-puzzle-card {
  display: block;
  min-width: 0;
  padding: 0.65rem;
  border: 1px solid rgba(255, 224, 154, 0.18);
  border-radius: 1rem;
  background: rgba(31, 27, 19, 0.86);
  color: #fff0c4;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}

.xq-puzzle-card .xq-board-wrap.match,
.xq-match-card__board .xq-board-wrap.match {
  overflow: hidden;
}

.xq-puzzle-card .xq-board,
.xq-match-card .xq-board {
  transform-origin: center;
  transition: transform 0.35s ease;
}

.xq-puzzle-card h2,
.xq-puzzle-card h5 {
  margin: 0 0 0.55rem;
  overflow: hidden;
  color: #fff0c4;
  font-size: 0.92rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xq-puzzle-suggestions {
  display: grid;
  gap: 0.75rem;
}

.xq-ad-slot {
  overflow: hidden;
  border-radius: 0.75rem;
}

#comments {
  display: none;
}

.turns {
  min-width: 0;
}

.turns .controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
  margin-bottom: 0.85rem;
}

.turns .controls > span {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 224, 154, 0.22);
  border-radius: 0.75rem;
  background: rgba(255, 238, 188, 0.1);
  color: #ffe6a8;
}

.turns ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
  max-width: none;
  max-height: 55vh;
  overflow: auto;
  padding-right: 0.2rem;
}

.turns ul li {
  min-width: 0;
}

.turns ul li .t {
  width: auto;
  min-width: 0;
  max-width: 100%;
  padding: 0.25rem 0.35rem;
  border-radius: 0.4rem;
  background: rgba(10, 16, 9, 0.32);
}

.xq-footer {
  position: relative;
  z-index: 1;
  margin-top: 1rem;
  border-top: 1px solid rgba(255, 224, 154, 0.14);
  background: rgba(10, 16, 9, 0.42);
}

.xq-footer a,
.xq-footer .text-muted {
  color: #d7c4a0 !important;
}

.form-control,
.form-select {
  border-color: rgba(255, 224, 154, 0.22);
  background-color: rgba(11, 16, 10, 0.58);
  color: #fff4d6;
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(166, 226, 75, 0.72);
  background-color: rgba(11, 16, 10, 0.76);
  color: #fff8df;
  box-shadow: 0 0 0 0.18rem rgba(119, 179, 0, 0.18);
}

.login-group {
  max-width: 420px;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--xq-border);
  border-radius: 1.25rem;
  background: var(--xq-panel);
  box-shadow: var(--xq-shadow);
}

.login-group h1 {
  color: #fff1c3;
  font-family: XQDisplay, Georgia, serif;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0;
}

.xq-auth-card.login-group {
  position: relative;
  width: min(100%, 456px);
  max-width: 456px;
  margin: clamp(0.75rem, 4vh, 2.5rem) auto 1.75rem;
  padding: clamp(1.15rem, 2.6vw, 1.7rem);
  overflow: hidden;
  border-color: rgba(255, 224, 154, 0.26);
  border-radius: 1rem;
  background:
    linear-gradient(145deg, rgba(44, 31, 18, 0.96), rgba(27, 19, 12, 0.93)),
    radial-gradient(circle at 12% 0%, rgba(245, 192, 90, 0.16), transparent 42%);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 232, 173, 0.1);
}

.xq-auth-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(245, 192, 90, 0.9), transparent);
  opacity: 0.62;
}

.xq-auth-card h1 {
  margin: 0 0 1rem;
  color: #fff1c3;
  font-size: clamp(2.05rem, 5vw, 2.45rem);
  line-height: 1.05;
  text-shadow: 0 2px 18px rgba(245, 192, 90, 0.18);
}

.xq-auth-social-stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
}

.xq-auth-provider {
  width: min(100%, 300px);
  margin-right: auto;
  margin-left: auto;
}

.xq-auth-provider--google {
  display: flex;
  justify-content: center;
  min-height: 40px;
}

.xq-auth-provider--google .g_id_signin {
  display: flex;
  justify-content: center;
  width: 100%;
}

.xq-auth-provider--apple {
  display: flex !important;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 0.7rem;
  font-weight: 700;
  line-height: 1.2;
  text-shadow: none;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}

.xq-auth-provider--apple:hover,
.xq-auth-provider--apple:focus {
  background-color: #fff8ec !important;
  color: #130f0a !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.3);
}

.xq-auth-divider {
  height: 1px;
  margin: 1.15rem 0 1.05rem;
  background: linear-gradient(90deg, transparent, rgba(255, 224, 154, 0.34), transparent);
}

.xq-auth-field {
  margin-bottom: 1rem !important;
}

.xq-auth-field label {
  margin-bottom: 0.35rem;
  color: #f7e7bf;
  font-weight: 800;
  letter-spacing: 0;
}

.xq-auth-card .form-control {
  min-height: 50px;
  border-radius: 0.7rem;
  background-color: rgba(8, 11, 7, 0.72);
  font-size: 1rem;
}

.xq-auth-card .field-validation-error {
  display: block;
  margin-top: 0.35rem;
}

.xq-auth-submit {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.25rem;
  margin-bottom: 1rem !important;
}

.xq-auth-submit .cf-turnstile {
  width: 100%;
  min-height: 65px;
}

.xq-auth-submit__button {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(255, 224, 154, 0.24);
  border-radius: 0.75rem;
  background:
    linear-gradient(180deg, rgba(183, 137, 54, 0.95), rgba(131, 91, 30, 0.98));
  color: #fff0cb;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow:
    0 12px 22px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 232, 173, 0.18);
}

.xq-auth-submit__button:hover,
.xq-auth-submit__button:focus {
  border-color: rgba(255, 232, 173, 0.42);
  background:
    linear-gradient(180deg, rgba(205, 156, 65, 0.98), rgba(147, 103, 34, 0.98));
  color: #fff8e6;
}

.xq-auth-submit__button:disabled {
  border-color: rgba(255, 224, 154, 0.14);
  opacity: 0.66;
  cursor: not-allowed;
}

.xq-auth-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.45rem;
  align-items: center;
  justify-content: center;
  color: #f2dfb5;
  font-weight: 800;
}

.xq-auth-links a {
  color: #bdf26f;
}

.xq-ad-wrap {
  display: block;
  width: min(100%, 728px);
  min-width: 0;
  margin-right: auto;
  margin-bottom: 1rem;
  margin-left: auto;
  padding: 0.75rem;
  border: 1px solid rgba(255, 224, 154, 0.18);
  border-radius: 1rem;
  background: rgba(20, 24, 15, 0.72);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2);
}

/* First-view ad suppression — class is set inside _AdsAll.cshtml's inline
   head script when the visitor has no xq.ads.firstViewDone localStorage
   flag. Hides every ad surface (.xq-ad-wrap slots, raw <ins.adsbygoogle>,
   and AdSense Auto Ads' injected .google-auto-placed) on the first page
   view only — the flag is set immediately so a refresh or any navigation
   shows ads as normal. */
.xq-hide-ads-first-view .xq-ad-wrap,
.xq-hide-ads-first-view ins.adsbygoogle,
.xq-hide-ads-first-view .google-auto-placed {
  display: none !important;
}

.ads-home {
  width: min(100%, 728px);
}

.xq-ad-label {
  margin-bottom: 0.35rem;
  color: rgba(244, 223, 175, 0.62);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.xq-ad-unit,
.xq-ad-dev-placeholder {
  width: 100%;
  min-height: 280px;
}

.xq-ad-dev-placeholder {
  display: grid;
  place-items: center;
  border: 1px dashed rgba(255, 224, 154, 0.28);
  border-radius: 0.7rem;
  background:
    linear-gradient(135deg, rgba(255, 232, 173, 0.08), rgba(119, 179, 0, 0.08)),
    rgba(10, 16, 10, 0.58);
  color: rgba(246, 234, 212, 0.68);
  font-size: 0.82rem;
  font-weight: 800;
  text-align: center;
}

.xq-ad-wrap--game,
.xq-ad-wrap--puzzle,
.xq-ad-wrap--puzzle-desktop {
  margin-top: 1rem;
}

.xq-ad-wrap--content-top {
  width: min(100%, 728px);
}

.xq-ad-wrap--content-top .xq-ad-unit,
.xq-ad-wrap--content-top .xq-ad-dev-placeholder {
  min-height: 96px;
}

.xq-ad-wrap--feed {
  width: min(100%, 728px);
}

.xq-ad-wrap--feed .xq-ad-unit,
.xq-ad-wrap--feed .xq-ad-dev-placeholder {
  min-height: 250px;
}

.xq-puzzle-grid > .xq-ad-grid-span {
  grid-column: 1 / -1;
}

.xq-match-ad-break {
  margin-top: 1rem;
}

.xq-match-grid--continued {
  margin-top: 1rem;
}

@media (max-width: 991.98px) {
  .xq-hero-grid,
  .xq-match-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .xq-live-stack {
    gap: 0.85rem;
  }

  .xq-puzzle-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  body.xq-app-body {
    padding-bottom: 0;
  }

  body.xq-app-body:has(.xq-bottom-nav) {
    padding-bottom: var(--xq-bottom-nav-height);
  }

  body.xq-app-body:has(.xq-bottom-nav) .xq-footer {
    margin-bottom: var(--xq-bottom-nav-height);
  }

  .xq-shell {
    padding-right: 0.85rem;
    padding-left: 0.85rem;
  }

  .xq-top-nav {
    margin-bottom: 0.7rem;
  }

  .xq-bottom-nav {
    display: grid;
  }

  .xq-app-install {
    bottom: calc(var(--xq-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
  }

  .xq-page-title {
    min-height: 48px;
    margin-bottom: 0.5rem;
  }

  .xq-play-panel {
    border-radius: 1rem;
  }

  .xq-hero-grid > .xq-live-stack {
    margin-top: 8rem;
  }

  .xq-play-panel::after {
    /* shrink the grid lattice on tablet to keep the play card uncluttered */
    width: 200px;
    height: 200px;
    right: -60px;
    bottom: -60px;
  }

  .xq-variant-tabs {
    gap: 0.55rem;
  }

  .xq-board-stage {
    padding: 0.55rem;
  }

  .xq-puzzle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
  }

  .xq-store-cta a {
    height: 40px;
  }

  .xq-ad-wrap {
    width: 100%;
    margin-top: 1rem;
    padding: 0.6rem;
    border-radius: 0.9rem;
  }

  .xq-ad-unit,
  .xq-ad-dev-placeholder {
    min-height: 250px;
  }

  .xq-ad-wrap--content-top .xq-ad-unit,
  .xq-ad-wrap--content-top .xq-ad-dev-placeholder {
    min-height: 100px;
  }

}

@media (max-width: 374.98px) {
  .xq-app-install {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 0.6rem;
    padding: 0.65rem 2.5rem 0.65rem 0.65rem;
  }

  .xq-app-install__icon {
    width: 38px;
    height: 38px;
  }

  .xq-app-install p {
    font-size: 0.78rem;
  }

  .xq-app-install__actions {
    gap: 0.4rem;
  }

  .xq-app-install__install,
  .xq-app-install__later {
    min-height: 34px;
    padding-right: 0.62rem;
    padding-left: 0.62rem;
  }
}

@media (max-width: 430px) {
  .xq-match-card {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 0.65rem;
    padding: 0.6rem;
  }

  .xq-match-card__name {
    font-size: 0.84rem;
  }

  .xq-match-card__score {
    font-size: 0.72rem;
  }

  .xq-puzzle-card {
    padding: 0.5rem;
  }
}

@media (max-width: 360px) {
  .xq-variant-tabs,
  .turns .controls,
  .turns ul {
    grid-template-columns: minmax(0, 1fr);
  }

  .xq-match-card {
    grid-template-columns: 98px minmax(0, 1fr);
  }
}

@keyframes xqCinematicIn {
  from {
    transform: translate3d(0, 10px, 0) scale(0.992);
  }

  to {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes xqLightDrift {
  from {
    transform: translate3d(-7%, -2%, 0);
  }

  to {
    transform: translate3d(6%, 2%, 0);
  }
}

@keyframes xqMistBreath {
  from {
    transform: translate3d(-2.4%, -0.8%, 0) rotate(-2deg);
  }

  to {
    transform: translate3d(2.2%, 1.1%, 0) rotate(-2deg);
  }
}

@keyframes xqRainSweep {
  from {
    opacity: 0.22;
    transform: translate3d(0, -4%, 0);
  }

  50% {
    opacity: 0.34;
  }

  to {
    opacity: 0.26;
    transform: translate3d(0.8vw, 4%, 0);
  }
}

@keyframes xqRainFall {
  0% {
    opacity: 0;
    transform: translate3d(calc(var(--rain-drift) * -0.35), -22vh, 0) rotate(var(--rain-tilt));
  }

  14%,
  74% {
    opacity: var(--rain-opacity);
  }

  58% {
    transform: translate3d(calc(var(--rain-drift) * 0.42), 54vh, 0) rotate(var(--rain-tilt));
  }

  100% {
    opacity: 0;
    transform: translate3d(var(--rain-drift), 124vh, 0) rotate(var(--rain-tilt));
  }
}

@keyframes xqLeafDrift {
  0% {
    opacity: 0;
    transform: translate3d(var(--leaf-start-x), var(--leaf-start-y), 0) rotate(var(--leaf-rotate)) scale(0.78);
  }

  16%,
  68% {
    opacity: 0.2;
  }

  42% {
    transform: translate3d(var(--leaf-mid-x), var(--leaf-mid-y), 0) rotate(calc(var(--leaf-rotate) + 22deg)) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate3d(var(--leaf-end-x), var(--leaf-end-y), 0) rotate(calc(var(--leaf-rotate) + 46deg)) scale(0.88);
  }
}

@keyframes xqButtonSheen {
  0% {
    opacity: 0;
    transform: translate3d(-55%, 0, 0);
  }

  12%,
  22% {
    opacity: 0.7;
  }

  42%,
  100% {
    opacity: 0;
    transform: translate3d(55%, 0, 0);
  }
}

@keyframes xqActiveSignal {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(0, -2px, 0) scale(1.06);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .xq-bg-ambient::before {
    animation: xqMistBreath 24s ease-in-out infinite alternate;
  }

  .xq-bg-ambient::after {
    animation: xqRainSweep 14s ease-in-out infinite alternate;
  }

  .xq-bg-rain {
    animation: xqRainFall var(--rain-duration) linear infinite;
    animation-delay: var(--rain-delay);
  }

  .xq-bg-leaf--one {
    animation: xqLeafDrift 28s linear infinite 2s;
  }

  .xq-bg-leaf--two {
    animation: xqLeafDrift 34s linear infinite 11s;
  }

  .xq-bg-leaf--three {
    animation: xqLeafDrift 31s linear infinite 18s;
  }

  .xq-bg-leaf--four {
    animation: xqLeafDrift 37s linear infinite 25s;
  }

  body.xq-app-body::after {
    animation: xqLightDrift 18s ease-in-out infinite alternate;
    will-change: transform;
  }

  /* .xq-top-nav intentionally removed from this animation list.
     xqCinematicIn ends at transform: scale(1) with animation-fill-mode: both,
     which leaves a non-none computed transform on the nav. Per CSS spec, any
     non-none transform on an ancestor turns that ancestor into the containing
     block for position:fixed descendants — and the Bootstrap mobile offcanvas
     (#offcanvas-navbar) is a position:fixed child of .xq-top-nav. With the
     transform present, the offcanvas resolved its top/right/bottom/left
     against the 41px-tall nav instead of the viewport, collapsing to a 40px
     bar that hid every menu item ("Trận đấu / Cờ thế / Tải app / Admin").
     The sticky top bar doesn't visually benefit from the cinematic slide-in
     anyway, so dropping it is the cleanest fix. */
  .xq-shell > .alert,
  .xq-play-panel,
  .xq-hero-grid > .xq-live-stack > *,
  .xq-feed-card,
  .xq-side-card,
  .xq-answer-card,
  .xq-match-card,
  .xq-puzzle-card,
  .xq-board-stage,
  .login-group {
    animation: xqCinematicIn 0.62s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  .xq-play-panel {
    animation-delay: 0.04s;
  }

  .xq-hero-grid > .xq-live-stack > *:nth-child(1),
  .xq-feed-card:nth-of-type(1) {
    animation-delay: 0.1s;
  }

  .xq-hero-grid > .xq-live-stack > *:nth-child(2),
  .xq-side-card:nth-of-type(2),
  .xq-match-card:nth-child(2n),
  .xq-puzzle-card:nth-child(2n) {
    animation-delay: 0.16s;
  }

  .xq-side-card:nth-of-type(3),
  .xq-match-card:nth-child(3n),
  .xq-puzzle-card:nth-child(3n) {
    animation-delay: 0.22s;
  }

  .btn-success::after,
  .xq-primary-btn::after {
    animation: xqButtonSheen 5.2s ease-in-out infinite 1.2s;
  }

  .xq-bottom-nav__item.active img {
    animation: xqActiveSignal 3.2s ease-in-out infinite;
  }
}

@media (hover: hover) and (pointer: fine) {
  .xq-primary-btn,
  .xq-variant-card,
  .xq-feed-card,
  .xq-side-card,
  .xq-answer-card,
  .xq-match-card,
  .xq-puzzle-card,
  .xq-board-stage {
    transition:
      transform 0.22s ease,
      border-color 0.22s ease,
      box-shadow 0.22s ease;
  }

  .xq-primary-btn:hover,
  .xq-primary-btn:focus {
    transform: translate3d(0, -2px, 0);
    box-shadow: 0 14px 30px rgba(48, 96, 12, 0.34);
  }

  .xq-variant-card:hover,
  .xq-match-card:hover,
  .xq-puzzle-card:hover {
    transform: translate3d(0, -4px, 0);
    border-color: rgba(166, 226, 75, 0.62);
    box-shadow:
      0 0 0 1px rgba(166, 226, 75, 0.2),
      0 18px 32px rgba(0, 0, 0, 0.32);
  }

  .xq-feed-card:hover,
  .xq-side-card:hover,
  .xq-answer-card:hover,
  .xq-board-stage:hover {
    transform: translate3d(0, -2px, 0);
    border-color: rgba(255, 224, 154, 0.36);
  }

  .xq-variant-card:hover img,
  .xq-puzzle-card:hover .xq-board,
  .xq-match-card:hover .xq-board {
    transform: scale(1.025);
  }

  .xq-bottom-nav__item:hover img,
  .xq-bottom-nav__item:focus img {
    transform: translate3d(0, -2px, 0) scale(1.06);
  }
}

@media (hover: none), (pointer: coarse) {
  .xq-bg-ambient::before,
  .xq-bg-ambient::after,
  .xq-bg-rain,
  .xq-bg-leaf {
    animation: none !important;
  }
}

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

  body.xq-app-body::after {
    opacity: 0.18;
    transform: none;
  }

}

/* App-parity game board and balanced ad layout */
.xq-game-shell {
  position: relative;
  margin: 0 auto;
  padding: clamp(0.45rem, 1.5vw, 1rem);
  border: 1px solid rgba(255, 224, 154, 0.14);
  border-radius: 1rem;
  background:
    linear-gradient(180deg, rgba(12, 17, 10, 0.2), rgba(12, 17, 10, 0.72)),
    url('../images/app/game-bg.jpg') center / cover;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

.xq-game-layout {
  display: grid;
  grid-template-columns: minmax(340px, 520px) minmax(280px, 336px);
  gap: clamp(0.8rem, 1.8vw, 1.15rem);
  align-items: start;
  justify-content: center;
}

.xq-game-main,
.xq-game-side {
  min-width: 0;
}

.xq-game-side {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.xq-board-stage {
  overflow: hidden;
  padding: clamp(0.45rem, 1.3vw, 0.75rem);
  border-color: rgba(255, 224, 154, 0.2);
  background:
    linear-gradient(180deg, rgba(255, 242, 198, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(15, 18, 13, 0.72);
}

.xq-board-stage .xq-board-wrap {
  width: min(100%, 520px);
  margin-top: 0.45rem;
  margin-bottom: 0.45rem;
  border-radius: 0.55rem;
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(255, 224, 154, 0.15);
}

.xq-board-wrap::after {
  padding-top: 110.071942%;
}

.xq-board {
  overflow: hidden;
  background-image: url('../images/default/board.png?v=20260523');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.xq-board-stage .xq-board {
  border-radius: 0.45rem;
}

.xq-board .xq-node,
.xq-board-wrap.match .xq-board .xq-piece {
  width: 10.671463%;
  height: 10.457516%;
}

.xq-board .p00,
.xq-board .p10,
.xq-board .p20,
.xq-board .p30,
.xq-board .p40,
.xq-board .p50,
.xq-board .p60,
.xq-board .p70,
.xq-board .p80,
.xq-board .p90 {
  left: 1.258993%;
}

.xq-board .p01,
.xq-board .p11,
.xq-board .p21,
.xq-board .p31,
.xq-board .p41,
.xq-board .p51,
.xq-board .p61,
.xq-board .p71,
.xq-board .p81,
.xq-board .p91 {
  left: 11.930456%;
}

.xq-board .p02,
.xq-board .p12,
.xq-board .p22,
.xq-board .p32,
.xq-board .p42,
.xq-board .p52,
.xq-board .p62,
.xq-board .p72,
.xq-board .p82,
.xq-board .p92 {
  left: 22.721823%;
}

.xq-board .p03,
.xq-board .p13,
.xq-board .p23,
.xq-board .p33,
.xq-board .p43,
.xq-board .p53,
.xq-board .p63,
.xq-board .p73,
.xq-board .p83,
.xq-board .p93 {
  left: 33.393285%;
}

.xq-board .p04,
.xq-board .p14,
.xq-board .p24,
.xq-board .p34,
.xq-board .p44,
.xq-board .p54,
.xq-board .p64,
.xq-board .p74,
.xq-board .p84,
.xq-board .p94 {
  left: 44.184652%;
}

.xq-board .p05,
.xq-board .p15,
.xq-board .p25,
.xq-board .p35,
.xq-board .p45,
.xq-board .p55,
.xq-board .p65,
.xq-board .p75,
.xq-board .p85,
.xq-board .p95 {
  left: 54.976019%;
}

.xq-board .p06,
.xq-board .p16,
.xq-board .p26,
.xq-board .p36,
.xq-board .p46,
.xq-board .p56,
.xq-board .p66,
.xq-board .p76,
.xq-board .p86,
.xq-board .p96 {
  left: 65.767386%;
}

.xq-board .p07,
.xq-board .p17,
.xq-board .p27,
.xq-board .p37,
.xq-board .p47,
.xq-board .p57,
.xq-board .p67,
.xq-board .p77,
.xq-board .p87,
.xq-board .p97 {
  left: 76.438849%;
}

.xq-board .p08,
.xq-board .p18,
.xq-board .p28,
.xq-board .p38,
.xq-board .p48,
.xq-board .p58,
.xq-board .p68,
.xq-board .p78,
.xq-board .p88,
.xq-board .p98 {
  left: 87.110312%;
}

.xq-board .p00,
.xq-board .p01,
.xq-board .p02,
.xq-board .p03,
.xq-board .p04,
.xq-board .p05,
.xq-board .p06,
.xq-board .p07,
.xq-board .p08 {
  top: 0.87146%;
}

.xq-board .p10,
.xq-board .p11,
.xq-board .p12,
.xq-board .p13,
.xq-board .p14,
.xq-board .p15,
.xq-board .p16,
.xq-board .p17,
.xq-board .p18 {
  top: 10.675381%;
}

.xq-board .p20,
.xq-board .p21,
.xq-board .p22,
.xq-board .p23,
.xq-board .p24,
.xq-board .p25,
.xq-board .p26,
.xq-board .p27,
.xq-board .p28 {
  top: 20.37037%;
}

.xq-board .p30,
.xq-board .p31,
.xq-board .p32,
.xq-board .p33,
.xq-board .p34,
.xq-board .p35,
.xq-board .p36,
.xq-board .p37,
.xq-board .p38 {
  top: 30.174292%;
}

.xq-board .p40,
.xq-board .p41,
.xq-board .p42,
.xq-board .p43,
.xq-board .p44,
.xq-board .p45,
.xq-board .p46,
.xq-board .p47,
.xq-board .p48 {
  top: 39.869281%;
}

.xq-board .p50,
.xq-board .p51,
.xq-board .p52,
.xq-board .p53,
.xq-board .p54,
.xq-board .p55,
.xq-board .p56,
.xq-board .p57,
.xq-board .p58 {
  top: 49.673203%;
}

.xq-board .p60,
.xq-board .p61,
.xq-board .p62,
.xq-board .p63,
.xq-board .p64,
.xq-board .p65,
.xq-board .p66,
.xq-board .p67,
.xq-board .p68 {
  top: 59.368192%;
}

.xq-board .p70,
.xq-board .p71,
.xq-board .p72,
.xq-board .p73,
.xq-board .p74,
.xq-board .p75,
.xq-board .p76,
.xq-board .p77,
.xq-board .p78 {
  top: 69.172113%;
}

.xq-board .p80,
.xq-board .p81,
.xq-board .p82,
.xq-board .p83,
.xq-board .p84,
.xq-board .p85,
.xq-board .p86,
.xq-board .p87,
.xq-board .p88 {
  top: 78.976035%;
}

.xq-board .p90,
.xq-board .p91,
.xq-board .p92,
.xq-board .p93,
.xq-board .p94,
.xq-board .p95,
.xq-board .p96,
.xq-board .p97,
.xq-board .p98 {
  top: 88.671024%;
}

.xq-node {
  isolation: isolate;
}

.xq-node > .xq-piece {
  z-index: 1;
}

.xq-piece {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 0.24rem 0.22rem rgba(0, 0, 0, 0.34));
}

.xq-piece::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.xq-node.last-move {
  background-image: url('../images/default/old-pos.png?v=20260523');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 55% 55%;
}

.xq-node.last-move.occupied > .xq-piece::after,
.xq-node.selected > .xq-piece::after,
.xq-board-wrap.match .xq-board .xq-piece.last-move::after {
  background-image: none;
}

.xq-node.selected::after,
.xq-board-wrap.match .xq-board .xq-piece.last-move::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  content: '';
  pointer-events: none;
  background-image: url('../images/default/selected.png?v=20260523');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.xq-node.check > .xq-piece,
.xq-board-wrap.match .xq-board .xq-piece.check {
  box-shadow: none;
}

.xq-node.check::before,
.xq-board-wrap.match .xq-board .xq-piece.check::before {
  position: absolute;
  top: -9%;
  left: -6%;
  z-index: 0;
  width: 110%;
  height: 110%;
  content: '';
  pointer-events: none;
  background: radial-gradient(circle, rgba(229, 57, 53, 0.8) 0%, rgba(229, 57, 53, 0.4) 60%, rgba(229, 57, 53, 0) 100%);
  border-radius: 10000px;
}

.xq-node.move-dest {
  background: url('../images/default/movable.png?v=20260523') center / 100% 100% no-repeat;
  cursor: pointer;
}

.xq-node.move-dest.occupied {
  background: none;
}

.xq-node.move-dest.occupied > .xq-piece {
  box-shadow: none;
}

.xq-node.move-dest.occupied > .xq-piece::after {
  display: block;
  content: '';
  background-image: url('../images/default/eatable.png?v=20260523');
}

.xq-dead-pieces {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 0.15rem;
}

.xq-dead-pieces .xq-piece {
  width: 2.1rem;
  height: auto;
  aspect-ratio: 89 / 96;
  float: none;
}

.xq-board-stage .xq-player {
  display: block;
  min-height: 2.4rem;
  margin: 0.2rem 0;
  padding: 0.38rem 0.65rem;
  border-radius: 0.7rem;
  background:
    linear-gradient(180deg, rgba(255, 239, 194, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(13, 17, 11, 0.72);
}

.xq-player-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.85rem;
  gap: 0.55rem;
  align-items: center;
  min-width: 0;
}

.xq-board-stage .xq-player[data-player='red'] .xq-player-inner {
  grid-template-columns: 4.85rem minmax(0, 1fr);
}

.xq-board-stage .xq-player .name {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.35rem;
  float: none;
  color: #ffe7ad;
  font-size: clamp(0.82rem, 2.4vw, 1rem);
  font-weight: 900;
  line-height: 1.15;
}

.xq-board-stage .xq-player[data-player='red'] .name {
  order: 2;
  justify-content: flex-end;
  text-align: right;
}

.xq-board-stage .xq-player .name a {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xq-board-stage .xq-player .name .state {
  flex: 0 0 auto;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(8, 12, 8, 0.55);
}

.xq-board-stage .xq-player .time {
  display: grid;
  width: 4.85rem;
  min-height: 1.65rem;
  place-items: center;
  float: none;
  border: 1px solid rgba(255, 85, 88, 0.24);
  border-radius: 0.5rem;
  background: rgba(40, 18, 18, 0.54);
  color: #ff5659;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
}

.xq-board-stage .xq-player[data-player='red'] .time {
  order: 1;
}

.xq-board-stage .xq-player .time > .turn {
  min-width: 4ch;
  margin-left: 0;
}

.xq-board-stage .xq-player .time strong {
  display: inline-block;
  min-width: 4ch;
  font-size: clamp(0.95rem, 3vw, 1.2rem);
  letter-spacing: 0;
}

.xq-board-stage .xq-player .time strong:empty::before {
  content: '\00a0';
}

.xq-game-tools {
  display: grid;
  position: relative;
  z-index: 2;
  gap: 0.75rem;
  padding: 0.85rem;
}

.xq-game-actions {
  display: grid;
  position: relative;
  z-index: 2;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: center;
  pointer-events: auto;
}

.xq-game-actions--viewer {
  grid-template-columns: minmax(0, 1fr);
}

.xq-game-actions--viewer .xq-action-exit {
  justify-content: flex-end;
}

.xq-action-group {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.xq-action-btn {
  min-height: 2.35rem;
  touch-action: manipulation;
  pointer-events: auto;
}

.xq-action-exit {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
}

.xq-sound-control {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.35rem;
  border: 1px solid rgba(255, 224, 154, 0.18);
  border-radius: 0.55rem;
  background: rgba(8, 12, 8, 0.34);
}

.xq-sound-toggle {
  display: inline-grid;
  width: 2.15rem;
  height: 2.15rem;
  place-items: center;
  padding: 0;
}

.xq-sound-volume {
  width: clamp(4.5rem, 12vw, 7rem);
  accent-color: #a6e24b;
}

.xq-game-chat {
  display: grid;
  gap: 0.55rem;
}

.xq-game-chat .messages {
  min-height: 10rem;
  max-height: clamp(11rem, 34vh, 18rem);
  overflow: auto;
  padding: 0.6rem;
  border: 1px solid rgba(255, 224, 154, 0.14);
  border-radius: 0.65rem;
  color: #fff2cf;
  background: rgba(8, 12, 8, 0.72);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.xq-game-chat .messages > div {
  margin-bottom: 0.35rem;
}

.xq-game-chat .messages > div:last-child {
  margin-bottom: 0;
}

.xq-game-chat .messages a {
  color: #a6e24b;
  font-weight: 800;
  text-decoration: none;
}

.xq-game-chat .messages a:hover,
.xq-game-chat .messages a:focus {
  color: #d6ff87;
  text-decoration: underline;
}

.xq-game-chat .messages .text-danger {
  color: #ff8a84 !important;
  font-weight: 800;
}

.xq-game-chat .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.xq-chat-copy-url {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  border-color: rgba(166, 226, 75, 0.34);
  color: #f7ffd8;
  font-weight: 800;
  background: linear-gradient(180deg, rgba(92, 131, 32, 0.54), rgba(33, 45, 16, 0.86));
  box-shadow: inset 0 1px 0 rgba(255, 255, 220, 0.18);
}

.xq-chat-copy-url:hover,
.xq-chat-copy-url:focus {
  border-color: rgba(214, 255, 135, 0.62);
  color: #ffffff;
  background: linear-gradient(180deg, rgba(118, 166, 42, 0.72), rgba(42, 58, 19, 0.92));
}

.xq-chat-copy-url .fa {
  color: #a6e24b;
}

.xq-chat-viewers {
  margin-left: auto;
  color: #d7c59e;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

/* Chat input group polish — original Bootstrap input-group-sm makes the
   Gửi button squat + grey + low-contrast (per user screenshot). Goals:
   match input height exactly, accent-green CTA, comfortable padding,
   distinct visual hierarchy. Same rules style both states (logged-in
   Gửi button AND anon Đăng nhập anchor) for layout consistency. */
.xq-game-chat .input-group {
  border-radius: 0.65rem;
  overflow: hidden;
  border: 1px solid rgba(255, 224, 154, 0.16);
  background: rgba(8, 12, 8, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 220, 0.04);
}
.xq-game-chat .input-group > .form-control {
  height: 44px;
  padding: 0 0.85rem;
  border: 0;
  background: transparent;
  color: #fff2cf;
  font-size: 0.95rem;
  box-shadow: none;
}
.xq-game-chat .input-group > .form-control::placeholder {
  color: rgba(247, 234, 212, 0.42);
  font-style: italic;
}
.xq-game-chat .input-group > .form-control:focus {
  outline: 0;
  background: rgba(146, 207, 44, 0.06);
  color: #ffffff;
  box-shadow: none;
}
.xq-game-chat .input-group > .form-control[disabled],
.xq-game-chat .input-group > .form-control[readonly] {
  background: rgba(0, 0, 0, 0.18);
  color: rgba(247, 234, 212, 0.45);
  cursor: not-allowed;
}

/* The trailing CTA (Gửi button when logged-in, Đăng nhập anchor when
   anon). Same rule for both — anchor styled as a button.
   Tall (matches input), accent green, weighted text, real padding. */
.xq-game-chat .input-group > .btn,
.xq-game-chat .input-group > a.btn {
  height: 44px;
  min-width: 88px;
  padding: 0 1.1rem;
  border: 0;
  border-left: 1px solid rgba(255, 224, 154, 0.12);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(146, 207, 44, 0.92), rgba(110, 166, 31, 0.96));
  color: #11200a;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -2px 0 rgba(0, 0, 0, 0.16);
  transition: filter 0.15s ease, transform 0.12s ease;
  text-decoration: none;
}
.xq-game-chat .input-group > .btn:hover,
.xq-game-chat .input-group > .btn:focus,
.xq-game-chat .input-group > a.btn:hover,
.xq-game-chat .input-group > a.btn:focus {
  filter: brightness(1.08);
  color: #11200a;
  text-decoration: none;
}
.xq-game-chat .input-group > .btn:active,
.xq-game-chat .input-group > a.btn:active {
  transform: translateY(1px);
}
.xq-game-chat .input-group > .btn[disabled] {
  background: linear-gradient(180deg, #5a6648, #3e4830);
  color: rgba(247, 234, 212, 0.55);
  box-shadow: none;
  cursor: not-allowed;
}

.xq-game-dead-pieces {
  display: grid;
  gap: 0.35rem;
  padding-top: 0.35rem;
}

.xq-game-side .xq-ad-wrap--game {
  width: min(100%, 336px);
  margin: 0 auto;
}

.xq-game-side .xq-ad-wrap--game .xq-ad-dev-placeholder,
.xq-game-side .xq-ad-wrap--game .xq-ad-unit {
  min-height: 280px;
}

@media (min-width: 992px) {
  .xq-game-side .xq-ad-wrap--game {
    position: relative;
    top: auto;
  }

  .xq-game-side .xq-ad-wrap--game .xq-ad-dev-placeholder,
  .xq-game-side .xq-ad-wrap--game .xq-ad-unit {
    min-height: 600px;
  }
}

@media (max-width: 991.98px) {
  .xq-game-shell {
    margin-right: calc(-1 * clamp(0.25rem, 1vw, 0.5rem));
    margin-left: calc(-1 * clamp(0.25rem, 1vw, 0.5rem));
  }

  .xq-game-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .xq-game-side {
    gap: 0.75rem;
  }

  .xq-game-desktop-ad {
    display: none;
  }

  .xq-game-side .xq-ad-wrap--game {
    width: min(100%, 728px);
  }
}

@media (max-width: 767.98px) {
  .xq-game-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .xq-action-exit {
    justify-content: space-between;
  }
}

@media (max-width: 575.98px) {
  .xq-game-shell {
    padding: 0.35rem;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .xq-board-stage {
    padding: 0.35rem;
    border-radius: 0.8rem;
  }

  .xq-board-stage .xq-board-wrap {
    margin-top: 0.3rem;
    margin-bottom: 0.3rem;
  }

  .xq-player-inner,
  .xq-board-stage .xq-player[data-player='red'] .xq-player-inner {
    grid-template-columns: minmax(0, 1fr) 4.25rem;
  }

  .xq-board-stage .xq-player[data-player='red'] .xq-player-inner {
    grid-template-columns: 4.25rem minmax(0, 1fr);
  }

  .xq-board-stage .xq-player .time {
    width: 4.25rem;
  }

  .xq-game-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .xq-action-exit {
    justify-content: space-between;
  }

  .xq-sound-control {
    flex: 1;
  }

  .xq-sound-volume {
    flex: 1;
    width: 100%;
  }

  .xq-action-exit .xq-action-quit {
    flex: 0 0 auto;
  }

  .xq-game-chat .messages {
    max-height: 14rem;
  }
}

/* ============================================================
   Auth prominence — anonymous-user CTAs, live presence, signup chip.
   See docs/web-auth-prominence-plan.md.
   ============================================================ */

.xq-auth-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  font-weight: 600;
  font-size: 14px;
  padding: 0 1.15rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease,
              transform 0.15s ease, box-shadow 0.18s ease, filter 0.15s ease;
  white-space: nowrap;
  border: 1px solid transparent;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.xq-auth-cta:focus-visible {
  outline: 3px solid var(--xq-paper-strong);
  outline-offset: 3px;
}

.xq-auth-cta--ghost {
  background: transparent;
  color: var(--xq-paper);
  border-color: var(--xq-border);
}

.xq-auth-cta--ghost:hover,
.xq-auth-cta--ghost:focus {
  background: rgba(255, 232, 173, 0.08);
  border-color: rgba(255, 232, 173, 0.4);
  color: var(--xq-paper);
}

.xq-auth-cta--primary {
  background: linear-gradient(180deg, #ffd576, var(--xq-gold));
  color: var(--xq-ink); /* #1c160f on #f5c05a = 10.73:1, WCAG AAA */
  box-shadow:
    0 4px 16px rgba(245, 192, 90, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.xq-auth-cta--primary:hover,
.xq-auth-cta--primary:focus {
  background: linear-gradient(180deg, #ffdd8a, #ffc864);
  color: var(--xq-ink);
  transform: translateY(-1px);
  box-shadow:
    0 6px 20px rgba(245, 192, 90, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Constrain nav inner content to match .xq-shell so at 1920×1080 the nav text
   stays centered with the content below instead of stretching to the viewport
   edges (which felt loose at the biggest real-user resolution). */
.xq-top-nav__inner {
  max-width: 1320px;
  min-height: 72px;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}

/* Nav cluster spacing */
.xq-nav-auth {
  display: flex;
  align-items: center;
  min-height: 46px;
  gap: 0.5rem;
}

/* Mobile-only "Tạo tài khoản" pill beside the burger so anonymous visitors
   don't have to open the offcanvas to find the signup CTA. Smaller than the
   desktop pill so brand + pill + burger all fit on one row at 360px wide. */
.xq-nav-auth__mobile {
  min-height: 36px;
  font-size: 12px;
  padding: 0 0.75rem;
}

/* Shrink the navbar brand at sub-lg widths so the mobile auth pill + burger
   actually fit on the same row. Default logo is 136px wide; at 360px viewport
   with 16px padding the row has 328px usable, and the cluster needs ~160px. */
@media (max-width: 991.98px) {
  .xq-top-nav,
  .xq-top-nav__inner {
    min-height: 60px;
  }

  .xq-top-nav .navbar-brand {
    min-height: 44px;
    margin-right: 0;
    padding: 0;
  }
  .xq-top-nav .navbar-brand .logo {
    width: 118px;
    height: 35px;
    background-size: contain;
  }
  .xq-top-nav .navbar-toggler {
    min-width: 42px;
    min-height: 40px;
    padding: 0.25rem 0.45rem;
  }
}

/* ---- Live presence micro-strip (anonymous-only, above the hero) ---- */
.xq-live-presence {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  padding: 0.5rem 1rem;
  margin: 0 auto;
  font-size: 12.5px;
  color: var(--xq-muted);
  letter-spacing: 0.02em;
  background: rgba(0, 0, 0, 0.18);
  border-bottom: 1px solid rgba(255, 218, 141, 0.08);
}

.xq-live-presence b {
  color: var(--xq-paper);
  font-weight: 600;
}

.xq-live-presence a {
  color: var(--xq-gold);
  text-decoration: none;
  font-weight: 600;
}

.xq-live-presence a:hover {
  text-decoration: underline;
}

.xq-live-presence__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5fd35a;
  box-shadow: 0 0 8px rgba(95, 211, 90, 0.6);
  animation: xq-presence-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

.xq-live-presence__sep {
  opacity: 0.5;
}

/* Rich variant of the strip: left-justified primary activity items. */
.xq-live-presence--rich {
  justify-content: flex-start;
}
@media (max-width: 560px) {
  .xq-live-presence--rich { justify-content: center; }
}

@keyframes xq-presence-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  .xq-live-presence__pulse { animation: none; }
}

/* ---- Hero inline auth hint (under play button, anonymous-only) ---- */
.xq-hero-auth-hint {
  margin-top: 1.1rem;
  padding-top: 1rem;
  /* Premium divider — center-fade hairline (see .xq-store-cta for
     rationale). Replaces the dashed border that visually crowded the
     play card with a hard horizontal line. */
  border-top: 0;
  background-image: linear-gradient(90deg, transparent, rgba(255, 224, 154, 0.10) 50%, transparent);
  background-position: top center;
  background-size: 55% 1px;
  background-repeat: no-repeat;
  font-size: 13px;
  color: var(--xq-muted);
  text-align: center;
}

.xq-hero-auth-hint b {
  color: var(--xq-paper);
  font-weight: 600;
}

.xq-hero-auth-hint a {
  color: var(--xq-gold);
  text-decoration: none;
  font-weight: 600;
  margin-left: 0.25rem;
}

.xq-hero-auth-hint a:hover,
.xq-hero-auth-hint a:focus-visible {
  text-decoration: underline;
}

/* ---- Mobile dismissible signup chip ----
   Positioned bottom-LEFT (not right) because the right side is taken by the
   app-install prompt's primary CTA and the inline _MobileApp store badges in
   the hero — putting the chip on the right would visually overlap those at
   the hero-scroll position. Bottom-left is empty real estate. */
.xq-signup-chip {
  position: fixed;
  bottom: calc(var(--xq-bottom-nav-height) + 12px + env(safe-area-inset-bottom, 0px));
  left: 14px;
  z-index: 1029; /* below bottom-nav (1030) but above content */
  display: none; /* JS toggles .is-visible on mobile only */
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem 0.6rem 0.9rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd576, var(--xq-gold));
  color: var(--xq-ink);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  box-shadow:
    0 8px 20px rgba(245, 192, 90, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(8px);
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.xq-signup-chip.is-visible {
  display: inline-flex;
  opacity: 1;
  transform: translateY(0);
}

.xq-signup-chip:hover,
.xq-signup-chip:focus-visible {
  color: var(--xq-ink);
  filter: brightness(1.04);
}

.xq-signup-chip:focus-visible {
  outline: 3px solid var(--xq-paper-strong);
  outline-offset: 3px;
}

.xq-signup-chip__icon {
  font-size: 12px;
  opacity: 0.85;
}

/* Sibling, NOT nested — keeps interactive markup valid (no <button> inside <a>) */
.xq-signup-chip__dismiss {
  position: fixed;
  z-index: 1030;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(28, 22, 15, 0.78);
  color: var(--xq-paper-strong);
  font-size: 16px;
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: background 0.15s ease, transform 0.15s ease;
}

.xq-signup-chip.is-visible + .xq-signup-chip__dismiss {
  display: flex;
}

.xq-signup-chip__dismiss:hover,
.xq-signup-chip__dismiss:focus-visible {
  background: rgba(28, 22, 15, 0.92);
  color: #fff;
}

.xq-signup-chip__dismiss:focus-visible {
  outline: 2px solid var(--xq-paper-strong);
  outline-offset: 2px;
}

/* Restrict chip to the navbar's collapsed range — desktop has the nav cluster
   instead and doesn't need a floating chip. */
@media (min-width: 992px) {
  .xq-signup-chip,
  .xq-signup-chip__dismiss { display: none !important; }
}

/* ---- Turnstile error visibility (a11y: role=alert + aria-live + focusable) ---- */
.turnstile-error {
  margin-top: 0.6rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(207, 75, 44, 0.5);
  background: rgba(207, 75, 44, 0.12);
  color: #ffd0c4;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
}

.turnstile-error:focus {
  outline: 2px solid var(--xq-paper-strong);
  outline-offset: 2px;
}

/* ============================================================
   Redesign 2026 — ported from mobile app design language.
   All classes prefixed xq-2026-* to avoid collisions.
   ============================================================ */

:root {
  --xq2026-primary:       #77b300;
  --xq2026-primary-bright:#92cf2c;
  --xq2026-danger:        #f53d3d;
  --xq2026-online:        #3DCA87;
  --xq2026-gold:          #F3BD7F;
  --xq2026-gold-muted:    #E9D1A3;
  --xq2026-brown:         #807063;
  --xq2026-brown-deep:    #5a4b3e;
  --xq2026-text:          #f6ead4;
  --xq2026-text-dim:      #c9bea7;
  --xq2026-text-mute:     #8b8270;
  --xq2026-heading:       #fff1c3;
  --xq2026-card:          rgba(39, 29, 18, .92);
  --xq2026-border:        rgba(255, 218, 141, .22);
  --xq2026-border-strong: rgba(255, 218, 141, .38);
  --xq2026-accent-glow:   rgba(146, 207, 44, .25);
  --xq2026-shadow-sm:     0 4px 14px rgba(0, 0, 0, .35);
  --xq2026-shadow-md:     0 14px 38px rgba(0, 0, 0, .42);
  --xq2026-normal-text:   #2B2728;
  --xq2026-light-text:    #ffffff;
}

/* Reusable ensō avatar.
   Mirror of app/src/components/Avatar.tsx: inner img is 58% size,
   margin-top 11%, margin-right 3% over avatar-bg.png frame. */
.xq-2026-avatar {
  width: 64px; height: 64px;
  background: url('/images/app/avatar-bg.png') center/contain no-repeat;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.xq-2026-avatar img {
  width: 58%; height: 58%;
  border-radius: 9999px;
  margin-top: 11%;
  margin-right: 3%;
  object-fit: cover;
}
.xq-2026-avatar.online::after {
  content: '';
  position: absolute;
  bottom: 8%; right: 8%;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--xq2026-online);
  border: 2px solid #ece3d0;
  box-shadow: 0 0 8px rgba(61,202,135,.55);
}
.xq-2026-avatar-mini { width: 36px; height: 36px; }
.xq-2026-avatar-lg   { width: 120px; height: 120px; }

/* Brown score pill with variant icon */
.xq-2026-score-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--xq2026-brown);
  color: var(--xq2026-light-text);
  padding: 3px 10px 3px 5px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13.5px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 2px rgba(0,0,0,.2);
}
.xq-2026-score-pill .ico {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #c14444, #8a1f1f);
  color: #fff;
  font-family: 'XQDisplay', Georgia, serif;
  font-size: 12px;
  line-height: 1;
  padding-bottom: 2px;
  border: 1px solid rgba(255,255,255,.2);
}
.xq-2026-score-pill.blind .ico {
  background: linear-gradient(180deg, #4a4a4a, #1a1a1a);
  color: transparent;
}
.xq-2026-score-pill.blind .ico::after {
  content: '?';
  color: rgba(255,255,255,.7);
  font-family: 'XQDisplay', Georgia, serif;
  font-size: 12px;
}

/* Parchment match card (live-matches-bg.png stretched, aspect 690:135) */
.xq-2026-match-card {
  aspect-ratio: 690 / 135;
  background: url('/images/app/live-matches-bg.png') center/100% 100% no-repeat;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 14px;
  cursor: pointer;
  transition: transform .15s, filter .15s;
  position: relative;
  border-radius: 4px;
  text-decoration: none;
  color: var(--xq2026-normal-text);
}
.xq-2026-match-card:hover {
  transform: translateY(-2px);
  filter: brightness(1.03);
  color: var(--xq2026-normal-text);
  text-decoration: none;
}
.xq-2026-match-card .live-clock {
  position: absolute;
  top: 8px; right: 14px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  color: var(--xq2026-brown-deep);
  opacity: .65;
  letter-spacing: .04em;
}
.xq-2026-match-side {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
  padding: 6px 4px;
}
.xq-2026-match-side.black { flex-direction: row-reverse; }
.xq-2026-match-name-col {
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0; flex: 1;
  align-items: flex-start;
}
.xq-2026-match-side.black .xq-2026-match-name-col {
  align-items: flex-end; text-align: right;
}
.xq-2026-match-name {
  font-family: 'XQDisplay', Georgia, serif;
  font-size: 19px;
  color: var(--xq2026-normal-text);
  line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 150px;
  padding-bottom: 2px;
  text-decoration: none;
}
.xq-2026-match-vs {
  width: 40px; height: 40px;
  background: url('/images/app/vs.png') center/contain no-repeat;
  flex-shrink: 0;
}

/* Live matches section — two parallel variant feeds */
.xq-2026-live-section {
  position: relative;
  isolation: isolate;
  margin: 28px 0 42px;
  padding-top: 24px;
}

.xq-2026-live-section::before {
  content: "";
  position: absolute;
  top: 0;
  right: calc(50% - 50vw);
  bottom: -32px;
  left: calc(50% - 50vw);
  z-index: -1;
  pointer-events: none;
  border-top: 1px solid rgba(255, 224, 154, 0.12);
  background:
    linear-gradient(180deg, rgba(20, 33, 20, 0.96) 0%, rgba(23, 32, 20, 0.88) 240px, rgba(22, 25, 16, 0.56) 72%, transparent 100%);
  box-shadow: inset 0 22px 44px rgba(0, 0, 0, 0.24);
}

.xq-2026-live-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.xq-2026-variant-column {
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.xq-2026-variant-column-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4px 4px;
  border-bottom: 1px dashed var(--xq2026-border);
  margin-bottom: 4px;
}
.xq-2026-variant-column-head .name {
  font-family: 'XQDisplay', Georgia, serif;
  font-size: 22px;
  color: var(--xq2026-heading);
  display: inline-flex; align-items: center; gap: 10px;
  line-height: 1;
  padding-bottom: 6px;
}
.xq-2026-variant-column-head .name .swatch {
  width: 10px; height: 10px; border-radius: 50%; background: var(--xq2026-gold);
}
.xq-2026-variant-column.blind .name .swatch { background: #c98bff; }
.xq-2026-variant-column-head .count {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  color: var(--xq2026-text-mute);
  letter-spacing: .08em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
  padding-bottom: 6px;
}

/* Section headers (shared with live section + matches) */
.xq-2026-section-head {
  display: flex; align-items: end; justify-content: space-between;
  margin-bottom: 16px; gap: 16px;
}
/* AdSense Auto Ads occasionally injects placement <div class="google-auto-placed">
   (or bare <ins class="adsbygoogle">) directly into our section head as siblings
   of .left / .all. With justify-content: space-between, the injected boxes claim
   horizontal space and squeeze our real children down to min-content width — the
   visible symptom is the "Đang chơi" title wrapping vertically letter-by-letter
   and "Xem tất cả →" stacking one word per line. Hide injected ad placements
   here; Auto Ads will route them to a more appropriate region. */
.xq-2026-section-head > .google-auto-placed,
.xq-2026-section-head > ins.adsbygoogle {
  display: none !important;
}

/* Keep Auto Ads from occupying the first decision point on the home page.
   Explicit ad slots remain below the primary play experience. */
.xq-shell > .xq-live-presence + .google-auto-placed,
.xq-shell > .xq-live-presence + ins.adsbygoogle {
  display: none !important;
}

.xq-2026-section-head .left { display: flex; align-items: end; gap: 16px; }
.xq-2026-section-head h2 {
  font-family: 'XQDisplay', Georgia, serif;
  font-size: 32px;
  color: var(--xq2026-heading);
  line-height: 1;
  padding-bottom: 2px;
  margin: 0;
}
.xq-2026-section-head .counter {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  color: var(--xq2026-text-mute);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding-bottom: 6px;
  display: inline-flex; align-items: center; gap: 8px;
}
.xq-2026-section-head .all {
  color: var(--xq2026-primary-bright);
  font-weight: 600;
  font-size: 14px;
  padding-bottom: 6px;
}

/* Ranking aside w/ ensō badges */
.xq-2026-rank-aside {
  background: var(--xq2026-card);
  border: 1px solid var(--xq2026-border);
  border-radius: 22px;
  box-shadow: var(--xq2026-shadow-md);
  display: flex; flex-direction: column;
  overflow: hidden;
  min-height: 520px;
}
.xq-2026-rank-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 22px 16px;
  border-bottom: 1px solid var(--xq2026-border);
}
.xq-2026-rank-head h2 {
  font-family: 'XQDisplay', Georgia, serif;
  font-size: 28px;
  color: var(--xq2026-heading);
  line-height: 1;
  padding-bottom: 2px;
  margin: 0;
}
.xq-2026-rank-head .sub {
  font-size: 11px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--xq2026-text-mute);
}
.xq-2026-rank-list { list-style: none; margin: 0; padding: 6px 0; flex: 1; }
.xq-2026-rank-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 9px 22px;
  border-bottom: 1px dashed rgba(255,218,141,.08);
  transition: background .15s;
  text-decoration: none;
}
.xq-2026-rank-row:hover { background: rgba(255,218,141,.05); text-decoration: none; }
.xq-2026-rank-row:last-child { border-bottom: 0; }
.xq-2026-rank-badge {
  width: 52px; height: 52px;
  background: url('/images/app/lower-rank-bg.png') center/contain no-repeat;
  display: grid; place-items: center;
  font-family: 'XQDisplay', Georgia, serif;
  font-size: 22px;
  color: var(--xq2026-light-text);
  line-height: 1;
  padding-bottom: 4px;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.xq-2026-rank-row.top .xq-2026-rank-badge {
  background-image: url('/images/app/top-rank-bg.png');
  width: 56px; height: 56px;
  font-size: 24px;
}
.xq-2026-rank-row.top.r1 .xq-2026-rank-badge {
  filter: brightness(1.05) drop-shadow(0 0 8px rgba(243,189,127,.35));
}
.xq-2026-rank-name {
  font-family: 'XQDisplay', Georgia, serif;
  font-size: 19px;
  color: var(--xq2026-heading);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  line-height: 1.15;
}
.xq-2026-rank-delta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13.5px;
  color: var(--xq2026-primary-bright);
  font-weight: 600;
}
.xq-2026-rank-foot {
  padding: 14px 22px;
  border-top: 1px solid var(--xq2026-border);
  background: rgba(0,0,0,.18);
  text-align: center;
}

/* Two stacked rankings in the hero aside (Classic + Blind variants).
   Each card is compact: smaller badges, tighter rows, no separate footer. */
.xq-2026-rank-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 520px;            /* matches play-card min-height for height parity */
}
.xq-2026-rank-stack > .xq-2026-rank-aside {
  min-height: 0;                /* each card sizes naturally inside the stack */
  flex: 1;                      /* split available height evenly */
}
.xq-2026-rank-aside--compact .xq-2026-rank-head--compact {
  padding: 14px 18px 10px;
}
.xq-2026-rank-aside--compact .xq-2026-rank-head--compact h2 {
  font-size: 19px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.xq-2026-rank-aside--compact .xq-2026-rank-head--compact .sub {
  font-size: 11px;
  color: var(--xq2026-primary-bright);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .04em;
  text-transform: none;
}
.xq-2026-rank-aside--compact .xq-2026-rank-head--compact .sub:hover { color: #b8e057; }
.xq-2026-rank-swatch {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.xq-2026-rank-swatch--classic { background: var(--xq2026-gold); }
.xq-2026-rank-swatch--blind   { background: #c98bff; }

/* Compact rank rows — tighter padding, smaller badge, smaller name */
.xq-2026-rank-list--compact .xq-2026-rank-row {
  grid-template-columns: 42px 1fr auto;
  gap: 10px;
  padding: 5px 18px;
}
.xq-2026-rank-list--compact .xq-2026-rank-badge {
  width: 40px; height: 40px;
  font-size: 18px;
}
.xq-2026-rank-list--compact .xq-2026-rank-row.top .xq-2026-rank-badge {
  width: 42px; height: 42px;
  font-size: 19px;
}
.xq-2026-rank-list--compact .xq-2026-rank-name { font-size: 16px; }
.xq-2026-rank-list--compact .xq-2026-rank-delta { font-size: 12.5px; }

/* Responsive — single column under 1100, mobile under 760 */
@media (max-width: 1100px) {
  .xq-2026-live-grid { grid-template-columns: 1fr; gap: 32px; }
  .xq-2026-rank-aside { min-height: 0; }
  .xq-2026-rank-stack { min-height: 0; }
}
@media (max-width: 760px) {
  .xq-2026-live-section {
    margin-top: 22px;
    margin-bottom: 30px;
    padding-top: 22px;
  }

  .xq-2026-live-section::before {
    top: -10px;
    bottom: -20px;
    background:
      linear-gradient(180deg, rgba(21, 35, 21, 0.98) 0%, rgba(22, 32, 20, 0.94) 14rem, rgba(22, 27, 17, 0.88) 100%);
  }

  .xq-2026-live-section .xq-2026-section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 0.75rem;
    row-gap: 0.45rem;
    margin-bottom: 20px;
  }

  .xq-2026-live-section .xq-2026-section-head .left {
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
  }

  .xq-2026-live-section .xq-2026-section-head h2 {
    font-size: 30px;
    white-space: nowrap;
    padding-bottom: 0;
  }

  .xq-2026-live-section .xq-2026-section-head .counter {
    font-size: 11px;
    line-height: 1.45;
    align-items: center;
    padding-bottom: 0;
    white-space: normal;
  }

  .xq-2026-live-section .xq-2026-section-head .all {
    white-space: nowrap;
    padding-top: 6px;
    padding-bottom: 0;
  }

  .xq-2026-variant-column-head {
    gap: 0.75rem;
  }

  .xq-2026-variant-column-head .count {
    white-space: nowrap;
  }

  .xq-2026-avatar { width: 56px; height: 56px; }
  .xq-2026-match-name { font-size: 17px; max-width: 110px; }
  .xq-2026-match-vs { width: 36px; height: 36px; }
  .xq-2026-score-pill { font-size: 12px; padding: 2px 8px 2px 4px; }
  .xq-2026-score-pill .ico { width: 16px; height: 16px; font-size: 10px; }
}

/* Hide board column-coordinate labels.
   site.css:626-646 renders 1-9 column labels as :after pseudo-elements on
   row-0 nodes (data-coord-top, positioned top:-11px) and row-9 nodes
   (data-coord-bottom, positioned bottom:-11px). The labels are 9px tall
   positioned 11px outside the node, so .xq-board's overflow:hidden clips
   most of each digit and leaves only a "tip" peeking through above the
   top row and below the bottom row — what the user reported as "tip of
   number visible at the bottom". Hiding the pseudo-elements removes the
   labels entirely (the data-coord-* attrs stay on the DOM nodes for any
   future re-enablement). */
.xq-node[data-coord-top]:after,
.xq-node[data-coord-bottom]:after {
  display: none !important;
  content: none !important;
}