/*
 * Thời Đại Hokage — shared player-page design system
 * Presentation only: do not rename selectors used by PHP/JS.
 */

:root {
  --hs-bg: #070a11;
  --hs-bg-soft: #0b0f18;
  --hs-surface: #0e131f;
  --hs-surface-raised: #141b29;
  --hs-surface-soft: rgba(255, 255, 255, .045);
  --hs-text: #f8fafc;
  --hs-text-soft: #d6deea;
  --hs-muted: #9aa8bc;
  --hs-muted-strong: #b6c2d2;
  --hs-gold: #facc15;
  --hs-gold-strong: #f59e0b;
  --hs-gold-soft: #fde68a;
  --hs-success: #4ade80;
  --hs-danger: #fb7185;
  --hs-info: #60a5fa;
  --hs-purple: #c084fc;
  --hs-border: rgba(255, 255, 255, .10);
  --hs-border-strong: rgba(250, 204, 21, .30);
  --hs-focus: rgba(250, 204, 21, .28);
  --hs-radius-xs: 8px;
  --hs-radius-sm: 11px;
  --hs-radius-md: 14px;
  --hs-radius-lg: 18px;
  --hs-radius-xl: 22px;
  --hs-shadow-card: 0 18px 48px rgba(0, 0, 0, .42);
  --hs-shadow-action: 0 8px 22px rgba(245, 158, 11, .25);
  --hs-ease: cubic-bezier(.2, .8, .2, 1);
}

.lb-item.is-current,
.lb-item[aria-current="page"] {
  color: #fff7d6 !important;
  background: rgba(250, 204, 21, .11) !important;
  border-color: rgba(250, 204, 21, .38) !important;
  box-shadow: inset 3px 0 0 var(--hs-gold), 0 8px 22px rgba(0, 0, 0, .24) !important;
}

.lb-item.is-current .lb-item-name,
.lb-item[aria-current="page"] .lb-item-name {
  color: var(--hs-gold-soft) !important;
}

.site-content {
  color: var(--hs-text);
}

.site-content p,
.site-content li,
.site-content td,
.site-content label,
.site-content input,
.site-content select,
.site-content textarea,
.site-content button {
  font-family: "Be Vietnam Pro", "Muli", Arial, sans-serif;
}

.site-content h1,
.site-content h2,
.site-content h3,
.site-content h4,
.site-content h5,
.site-content h6 {
  color: var(--hs-text);
  line-height: 1.25;
}

.site-content small,
.site-content .text-muted {
  color: var(--hs-muted) !important;
}

/* Shared feature surfaces */
.site-content :is(
  .pm-shell,
  .gc-shell,
  .result,
  #bxh-wrap,
  .bxh-shell,
  .boss-shell,
  .ev-shell,
  .hc-shell,
  .vdlc-shell,
  .log-card
) {
  color: var(--hs-text) !important;
  background: linear-gradient(165deg, rgba(17, 23, 36, .98), rgba(7, 10, 17, .99)) !important;
  border: 1px solid var(--hs-border-strong) !important;
  border-radius: var(--hs-radius-xl) !important;
  box-shadow: var(--hs-shadow-card) !important;
  isolation: isolate;
}

.site-content :is(
  .pm-page-hd,
  .gc-banner,
  .tn-banner,
  .bxh-hd,
  .boss-hd,
  .ev-hd,
  .hc-hd,
  .vdlc-hd,
  .log-card-hd
) {
  min-height: 78px;
  padding: 16px 18px !important;
  background: rgba(250, 204, 21, .055) !important;
  border-bottom: 1px solid var(--hs-border) !important;
  text-align: left;
}

.site-content :is(
  .pm-page-hd-icon,
  .gc-banner-icon,
  .bxh-hd-icon,
  .boss-hd-icon,
  .ev-hd-icon,
  .ev-logo,
  .hc-icon,
  .vdlc-hd-icon,
  .log-hd-icon
) {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px;
  border-radius: var(--hs-radius-md) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--hs-gold) !important;
  background: #251807 !important;
  border: 1px solid rgba(250, 204, 21, .35) !important;
  box-shadow: 0 0 18px rgba(245, 158, 11, .14) !important;
  animation-duration: 6s !important;
}

.site-content :is(
  .pm-page-hd-title,
  .gc-banner-title,
  .tn-banner b,
  .bxh-hd-title,
  .bxh-hd-txt h2,
  .boss-hd-title,
  .ev-hd-title,
  .ev-title,
  .hc-title,
  .vdlc-hd-title,
  .log-card-hd-title
) {
  margin-top: 0 !important;
  margin-bottom: 3px !important;
  color: var(--hs-gold-soft) !important;
  font-family: "Boogaloo", "Be Vietnam Pro", sans-serif !important;
  font-size: clamp(19px, 2.6vw, 25px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: .01em !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
  filter: none !important;
  text-shadow: 0 0 18px rgba(250, 204, 21, .18) !important;
  animation: none !important;
}

.site-content :is(
  .pm-page-hd-sub,
  .gc-banner-sub,
  .bxh-hd-sub,
  .bxh-hd-txt p,
  .boss-hd-sub,
  .ev-hd-sub,
  .ev-subtitle,
  .hc-sub,
  .vdlc-hd-sub
) {
  color: var(--hs-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Section labels */
.site-content :is(
  .pm-sec-title,
  .gc-sec-title,
  .ev-sec,
  .ev-ptitle,
  .vdlc-sec-label,
  .hc-log-hd,
  .boss-sec,
  .roll-title,
  .tg-title
) {
  color: var(--hs-muted-strong) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
}

/* Inputs */
.site-content :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea,
  .pm-input,
  .gc-input,
  .gc-select,
  .boss-select,
  .modal-select,
  .bxh-sv-select,
  .vdlc-sv-select,
  .hc-select,
  .ev-sel,
  .pf-sel,
  .form-control
) {
  width: 100%;
  min-height: 44px;
  color: var(--hs-text) !important;
  -webkit-text-fill-color: var(--hs-text) !important;
  background: #111827 !important;
  border: 1px solid rgba(148, 163, 184, .24) !important;
  border-radius: var(--hs-radius-sm) !important;
  outline: 0 !important;
  box-shadow: none !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}

.site-content :is(input, select, textarea, .form-control):hover {
  border-color: rgba(250, 204, 21, .32) !important;
}

.site-content :is(input, select, textarea, .form-control):focus {
  border-color: var(--hs-gold) !important;
  box-shadow: 0 0 0 3px var(--hs-focus) !important;
  background: #141c2b !important;
}

.site-content :is(input, textarea)::placeholder {
  color: #7f8da1 !important;
  opacity: 1;
}

.site-content select option,
.site-content select optgroup {
  color: var(--hs-text) !important;
  background: #111827 !important;
}

.site-content label,
.site-content :is(.pm-label, .gc-label, .boss-label, .ev-label, .pf-label, .modal-label) {
  color: var(--hs-muted-strong) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
}

/* Primary actions */
.site-content :is(
  .pm-submit,
  .gc-btn-submit,
  .btn-napngay,
  .btn-fight,
  .btn-claimable,
  .btn-claim-bxh,
  .btn-success,
  .bxh-reload-btn,
  .hc-btn,
  .hc-day-btn.is-active,
  .btn-lock-server:not(:disabled),
  .btn-achieved,
  .btn-buy,
  .btn-roll,
  .btn-spin,
  .btn-claim-daily:not(:disabled),
  .btn-open-buy,
  .btn-open-shop,
  .btn-modal-confirm,
  .cm-btn-ok,
  .btn-primary,
  .swal2-confirm
) {
  min-height: 42px;
  padding: 9px 16px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #151006 !important;
  -webkit-text-fill-color: #151006 !important;
  background: linear-gradient(135deg, var(--hs-gold), var(--hs-gold-strong)) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: var(--hs-radius-sm) !important;
  box-shadow: var(--hs-shadow-action) !important;
  font-family: "Be Vietnam Pro", sans-serif !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer;
  transition: filter .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

.site-content :is(
  .pm-submit,
  .gc-btn-submit,
  .btn-napngay,
  .btn-fight,
  .btn-claimable,
  .btn-claim-bxh,
  .btn-success,
  .bxh-reload-btn,
  .hc-btn,
  .hc-day-btn.is-active,
  .btn-lock-server:not(:disabled),
  .btn-achieved,
  .btn-buy,
  .btn-roll,
  .btn-spin,
  .btn-claim-daily:not(:disabled),
  .btn-open-buy,
  .btn-open-shop,
  .btn-modal-confirm,
  .cm-btn-ok,
  .btn-primary
):hover {
  transform: none !important;
  filter: brightness(1.08) !important;
  border-color: rgba(255, 255, 255, .34) !important;
  box-shadow: 0 9px 26px rgba(245, 158, 11, .36) !important;
}

/* Secondary and quiet actions */
.site-content :is(
  .gc-btn-copy,
  .btn-preview,
  .btn-view-prize,
  .btn-sm-view,
  .btn-sv,
  .btn-modal-cancel,
  .cm-btn-cancel,
  .btn-secondary,
  .btn-outline-warning,
  .swal2-cancel
) {
  min-height: 40px;
  padding: 8px 14px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--hs-gold-soft) !important;
  -webkit-text-fill-color: var(--hs-gold-soft) !important;
  background: rgba(250, 204, 21, .075) !important;
  border: 1px solid rgba(250, 204, 21, .24) !important;
  border-radius: var(--hs-radius-sm) !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease !important;
}

.site-content :is(
  .gc-btn-copy,
  .btn-preview,
  .btn-view-prize,
  .btn-sm-view,
  .btn-sv,
  .btn-modal-cancel,
  .cm-btn-cancel,
  .btn-secondary,
  .btn-outline-warning
):hover {
  transform: none !important;
  color: #fff7d6 !important;
  background: rgba(250, 204, 21, .13) !important;
  border-color: rgba(250, 204, 21, .42) !important;
}

/* Disabled states remain visibly non-interactive */
.site-content :is(button, .btn, [role="button"]):disabled,
.site-content :is(button, .btn, [role="button"])[disabled],
.site-content :is(.btn-locked, .btn-claimed, .btn-done-bxh, .btn-sm-claim.locked, .btn-sm-claim.done) {
  color: #8794a6 !important;
  -webkit-text-fill-color: #8794a6 !important;
  background: rgba(255, 255, 255, .055) !important;
  border-color: rgba(255, 255, 255, .10) !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: .72 !important;
  cursor: not-allowed !important;
  transform: none !important;
  animation: none !important;
}

/* Tabs and selectable choices */
.site-content :is(
  .pm-main-tab,
  .btn-period,
  .period-btn,
  .bxh-tab-btn,
  .pay-method-btn,
  .net-item,
  .mg-btn
) {
  color: var(--hs-text-soft) !important;
  background: rgba(255, 255, 255, .045) !important;
  border: 1px solid var(--hs-border) !important;
  border-radius: var(--hs-radius-sm) !important;
  transition: background .18s ease, border-color .18s ease, color .18s ease !important;
}

.site-content :is(
  .pm-main-tab,
  .btn-period,
  .period-btn,
  .bxh-tab-btn,
  .pay-method-btn,
  .net-item,
  .mg-btn
).active {
  color: var(--hs-gold-soft) !important;
  background: rgba(250, 204, 21, .10) !important;
  border-color: rgba(250, 204, 21, .42) !important;
  box-shadow: inset 0 0 0 1px rgba(250, 204, 21, .06) !important;
}

/* Cards and asynchronous HTML fragments returned by API/AJAX */
.site-content :is(
  .pkg-card,
  .gc-code-card,
  .gift-card,
  .milestone-card,
  .hc-day,
  .ss-card,
  .ev-panel,
  .buy-bar,
  .roll-bar,
  .vdlc-char-card,
  .boss-gif-card,
  .boss-hp-wrap,
  .bxh-outer,
  .duatop-note,
  .cart-item,
  #quanap > div,
  #top-recharge > div
) {
  color: var(--hs-text) !important;
  background-color: var(--hs-surface-soft) !important;
  border-color: var(--hs-border) !important;
  border-radius: var(--hs-radius-md) !important;
}

/* Tables, including fragments injected by AJAX */
.site-content :is(
  .table-responsive,
  .tbl-wrap,
  .gc-table-wrap,
  .boss-tbl-wrap,
  .bxh-tbl-wrap,
  .bxh-tbl-scroll
) {
  width: 100%;
  max-width: 100%;
  overflow-x: auto !important;
  border-radius: var(--hs-radius-md) !important;
  border-color: var(--hs-border) !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(250, 204, 21, .32) transparent;
}

.site-content :is(table, .table, .ev-tbl, .hc-log-table, .boss-tbl, .bxh-tbl, .bxh-table) {
  width: 100%;
  color: var(--hs-text-soft) !important;
  background: transparent !important;
  border-collapse: collapse;
}

.site-content :is(table, .table, .ev-tbl, .hc-log-table, .boss-tbl, .bxh-tbl, .bxh-table) th {
  color: var(--hs-gold-soft) !important;
  background: rgba(250, 204, 21, .085) !important;
  border-color: rgba(250, 204, 21, .15) !important;
  font-family: "Be Vietnam Pro", sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase;
}

.site-content :is(table, .table, .ev-tbl, .hc-log-table, .boss-tbl, .bxh-tbl, .bxh-table) td {
  color: var(--hs-text-soft);
  border-color: rgba(255, 255, 255, .07) !important;
}

.site-content :is(table, .table, .ev-tbl, .hc-log-table, .boss-tbl, .bxh-tbl, .bxh-table) tbody tr:hover td {
  background: rgba(255, 255, 255, .035) !important;
}

.site-content :is(.badge, [class*="badge-"]) {
  padding: 5px 8px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .02em;
}

.site-content :is(.badge-success, .badge-primary) {
  color: #bbf7d0 !important;
  background: rgba(34, 197, 94, .14) !important;
  border: 1px solid rgba(74, 222, 128, .28);
}

.site-content :is(.badge-danger, .badge-error) {
  color: #fecdd3 !important;
  background: rgba(244, 63, 94, .13) !important;
  border: 1px solid rgba(251, 113, 133, .28);
}

.site-content :is(.badge-warning, .badge-info, .badge-secondary) {
  color: var(--hs-gold-soft) !important;
  background: rgba(250, 204, 21, .10) !important;
  border: 1px solid rgba(250, 204, 21, .24);
}

/* Message/status blocks used by page AJAX handlers */
.site-content :is(
  #msg,
  .gc-msg,
  .boss-msg,
  .ev-msg,
  .hc-msg,
  .vdlc-message,
  .alert,
  .warn-note,
  .bxh-alert,
  .vdlc-alert,
  .hc-closed
) {
  border-radius: var(--hs-radius-sm) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
}

.site-content :is(.gc-msg.ok, .boss-msg.ok, .ev-msg.ok, .hc-msg.ok, .alert-success) {
  color: #a7f3d0 !important;
  background: rgba(34, 197, 94, .09) !important;
  border: 1px solid rgba(74, 222, 128, .26) !important;
}

.site-content :is(.gc-msg.err, .boss-msg.err, .ev-msg.err, .hc-msg.err, .alert-danger) {
  color: #fecdd3 !important;
  background: rgba(244, 63, 94, .09) !important;
  border: 1px solid rgba(251, 113, 133, .26) !important;
}

.site-content :is(.gc-msg.loading, .boss-msg.loading, .ev-msg.loading, .hc-msg.loading, .alert-warning) {
  color: #fef3c7 !important;
  background: rgba(250, 204, 21, .075) !important;
  border: 1px solid rgba(250, 204, 21, .24) !important;
}

/* Modals and SweetAlert from all linked AJAX/API flows */
.site-content :is(
  .boss-modal-box,
  .bxh-modal-box,
  .hc-modal-box,
  .ev-mbox,
  .cm-box,
  .modal-content
),
.swal2-popup {
  color: var(--hs-text) !important;
  background: #0d121d !important;
  border: 1px solid var(--hs-border-strong) !important;
  border-radius: var(--hs-radius-lg) !important;
  box-shadow: 0 24px 72px rgba(0, 0, 0, .72) !important;
}

.swal2-title,
.site-content :is(.boss-modal-title, .bxh-modal-title, .hc-modal-title, .ev-mtitle, .cm-title) {
  color: var(--hs-gold-soft) !important;
  font-family: "Boogaloo", "Be Vietnam Pro", sans-serif !important;
  letter-spacing: .01em !important;
}

.swal2-html-container,
.swal2-content {
  color: var(--hs-text-soft) !important;
}

.swal2-actions {
  gap: 8px;
}

/* Standalone authentication pages use the same tokens without changing forms. */
.auth-card {
  color: var(--hs-text) !important;
  background: rgba(13, 18, 29, .94) !important;
  border-color: var(--hs-border-strong) !important;
  border-radius: var(--hs-radius-xl) !important;
}

.auth-card :is(.game-title, .auth-divider em) {
  color: var(--hs-gold-soft) !important;
  -webkit-text-fill-color: currentColor !important;
}

.auth-card :is(.subtitle, .field-label, .auth-switch, .pw-hint) {
  color: var(--hs-muted) !important;
}

.auth-card .input-shell {
  min-height: 48px;
  color: var(--hs-text) !important;
  background: #111827 !important;
  border-color: rgba(148, 163, 184, .24) !important;
  border-radius: var(--hs-radius-sm) !important;
}

.auth-card .input-shell:focus-within {
  border-color: var(--hs-gold) !important;
  box-shadow: 0 0 0 3px var(--hs-focus) !important;
}

.auth-card .input-shell input {
  color: var(--hs-text) !important;
  -webkit-text-fill-color: var(--hs-text) !important;
}

.auth-card .input-shell input::placeholder {
  color: #7f8da1 !important;
}

.auth-card .btn-auth {
  min-height: 46px;
  color: #151006 !important;
  background: linear-gradient(135deg, var(--hs-gold), var(--hs-gold-strong)) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: var(--hs-radius-sm) !important;
  box-shadow: var(--hs-shadow-action) !important;
  font-family: "Be Vietnam Pro", sans-serif !important;
  font-weight: 900 !important;
}

.auth-card .btn-auth:disabled {
  color: #8794a6 !important;
  background: rgba(255, 255, 255, .07) !important;
  border-color: rgba(255, 255, 255, .10) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

/* Visible keyboard focus without changing click handlers */
.site-content :is(a, button, input, select, textarea, [tabindex]):focus-visible,
.auth-card :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--hs-focus) !important;
  outline-offset: 2px !important;
}

/* Shared non-blocking network indicator. JS only toggles state. */
#hs-network-status {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 400000;
  height: 3px;
  pointer-events: none;
  opacity: 0;
  transform: scaleX(.08);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--hs-gold-strong), var(--hs-gold-soft));
  transition: opacity .16s ease, transform .22s ease;
}

#hs-network-status.is-active {
  opacity: 1;
  transform: scaleX(.74);
}

#hs-network-status.is-done {
  opacity: 0;
  transform: scaleX(1);
}

/* Consistent mobile rhythm */
@media (max-width: 991px) {
  .site-wrapper {
    padding: 12px !important;
  }

  .site-row {
    gap: 14px !important;
  }

  .site-content :is(
    .pm-page-hd,
    .gc-banner,
    .tn-banner,
    .bxh-hd,
    .boss-hd,
    .ev-hd,
    .hc-hd,
    .vdlc-hd,
    .log-card-hd
  ) {
    min-height: 70px;
    padding: 14px !important;
  }
}

@media (max-width: 575px) {
  .site-wrapper {
    padding: 8px !important;
  }

  .site-content :is(
    .pm-shell,
    .gc-shell,
    .result,
    #bxh-wrap,
    .bxh-shell,
    .boss-shell,
    .ev-shell,
    .hc-shell,
    .vdlc-shell,
    .log-card
  ) {
    border-radius: var(--hs-radius-lg) !important;
  }

  .site-content :is(
    .pm-page-hd-icon,
    .gc-banner-icon,
    .bxh-hd-icon,
    .boss-hd-icon,
    .ev-hd-icon,
    .ev-logo,
    .hc-icon,
    .vdlc-hd-icon,
    .log-hd-icon
  ) {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px;
  }

  .site-content :is(button, .btn, [role="button"]) {
    min-height: 42px;
  }

  .site-content :is(.ev-grid, .boss-cols) {
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-content *,
  .site-content *::before,
  .site-content *::after,
  .auth-card *,
  .auth-card *::before,
  .auth-card *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  #hs-network-status {
    transition: none !important;
  }
}