/* Account activity uses the same surfaces, type and controls as the arena. */
#ha-account-page.is-transactions .ha-acct { max-width: 1200px; }
#ha-account-page.is-transactions .ha-acct-h,
#ha-account-page.is-transactions .ha-acct-pane[data-pane="record"] { max-width: none; }
#ha-account-page.is-transactions .ha-acct-h { font: 700 30px/1.3 var(--font); letter-spacing: -.04em; margin: 0 0 var(--s5); }
#ha-account-page.is-transactions .ha-acct-tabs { max-width: none; width: fit-content; margin: 0 0 var(--s7); }
#ha-account-page.is-transactions .ha-acct-tab { flex: none; padding: 0 var(--s5); min-height: 44px; font: 600 var(--fs-4)/1.4 var(--font); letter-spacing: 0; }
.tx-page { container-type: inline-size; min-width: 0; }
.tx-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); margin-bottom: var(--s5); }
.tx-heading h2 { display: flex; align-items: center; gap: var(--s3); font: 700 var(--fs-8)/1.3 var(--font); color: var(--txt); letter-spacing: -.025em; margin: 0 0 var(--s2); }
.tx-heading h2 span { padding: 4px 8px; border-radius: var(--r-chip); background: var(--raise); color: var(--txt-dim); font: 600 var(--fs-3)/1.2 var(--num); letter-spacing: 0; }
.tx-heading p { color: var(--txt-dim); font-size: var(--fs-4); line-height: 1.6; margin: 0; }
.tx-page .ha-btn { min-height: 44px; gap: var(--s2); }
.tx-page svg { width: 18px; height: 18px; flex: none; }
.tx-panel { border-radius: var(--r); background: var(--panel-2); box-shadow: var(--slab); overflow: hidden; }
.tx-toolbar { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--s3); padding: var(--s5); scroll-margin-top: var(--s4); }
.tx-filter { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.tx-filter > span:first-child { color: var(--txt-dim); font-size: var(--fs-3); font-weight: 500; }
.tx-select { display: flex; position: relative; }
.tx-select select { appearance: none; color: var(--txt); background: var(--face); border: 1px solid var(--edge); border-radius: var(--r-sm); min-height: 44px; padding: 0 38px 0 var(--s3); font: 600 var(--fs-4)/1.4 var(--font); cursor: pointer; width: 100%; min-width: 0; box-shadow: inset 0 1px 0 var(--line); }
.tx-select select:hover { background: var(--face-hi); }
.tx-select svg { position: absolute; right: 10px; top: 13px; pointer-events: none; color: var(--txt-mute); }
.tx-select option { background: var(--raise); color: var(--txt); }
.tx-pagination-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s4); }
.tx-page-size .tx-filter { flex-direction: row; align-items: center; }
.tx-page-size select { width: 72px; }
.tx-table-wrap { min-width: 0; background: var(--card); }
.tx-table { width: 100%; border-collapse: collapse; text-align: left; font-size: var(--fs-4); }
.tx-table th { color: var(--txt-mute); font-size: var(--fs-3); font-weight: 500; padding: 14px var(--s5); background: var(--panel); }
.tx-table th:nth-child(3), .tx-table th:nth-child(4) { text-align: right; }
.tx-table th:last-child { width: 56px; padding: 0; }
.tx-table td { padding: var(--s4) var(--s5); border-top: 1px solid var(--line-soft); }
.tx-table tbody tr:hover { background: var(--panel-2); }
.tx-activity { display: flex; align-items: center; gap: var(--s3); }
.tx-activity > div { min-width: 0; }
.tx-activity-icon { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--face); box-shadow: inset 0 1px 0 var(--line); color: var(--txt-dim); display: grid; place-items: center; flex: none; }
.tx-activity-icon svg { width: 22px; height: 22px; }
.tx-activity-icon.is-games { color: var(--gold); }
.tx-activity b { display: block; color: var(--txt); font-size: var(--fs-4); font-weight: 600; white-space: nowrap; }
.tx-activity small { display: block; color: var(--txt-mute); font-size: var(--fs-3); margin-top: 4px; max-width: 25ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: var(--r-chip); font-size: var(--fs-3); font-weight: 500; line-height: 1.4; white-space: nowrap; color: var(--txt-dim); background: var(--raise); }
.tx-status i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.tx-status.is-complete, .tx-status.is-won { color: var(--green-soft); background: var(--green-dim); }
.tx-status.is-lost { color: var(--red-hot); background: var(--red-dim); }
.tx-status.is-refunded, .tx-status.is-cancelled { color: var(--txt-dim); }
.tx-amount { text-align: right; font-family: var(--num); font-variant-numeric: tabular-nums; }
.tx-money { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; color: var(--gold); }
.tx-money img { width: 18px; height: 18px; object-fit: contain; flex: none; }
.tx-money b { font-weight: 700; font-size: 15px; min-width: 0; overflow-wrap: anywhere; }
.tx-money small { color: var(--txt-dim); font-size: var(--fs-3); flex: none; }
.tx-amount.is-positive .tx-money b { color: var(--green-soft); }
.tx-amount.is-negative .tx-money b { color: var(--red-hot); }
.tx-stake { display: block; font: 400 var(--fs-3)/1.5 var(--font); color: var(--txt-mute); margin-top: 4px; overflow-wrap: anywhere; }
.tx-time { text-align: right; }
.tx-time time { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: var(--fs-3); white-space: nowrap; }
.tx-time time span, .tx-unknown { color: var(--txt-mute); }
.tx-time time b { color: var(--txt-dim); font-weight: 500; }
.tx-table td.tx-receipt { padding: 0 var(--s3) 0 0; }
.tx-receipt a, .tx-no-receipt { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-sm); color: var(--txt-mute); }
.tx-receipt a:hover { color: var(--txt); background: var(--face); }
.tx-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s4); padding: var(--s4) var(--s5); border-top: 1px solid var(--line-soft); }
.tx-footer p { font-size: var(--fs-3); color: var(--txt-mute); margin: 0; }
.tx-footer nav { display: flex; align-items: center; gap: 6px; }
.tx-footer .ha-btn { padding: 0 var(--s3); font-size: var(--fs-2); }
.tx-footer .tx-page-arrow { width: 44px; padding: 0; }
#tx-page-number { display: grid; place-items: center; min-width: 58px; height: 44px; background: var(--well); border-radius: var(--r-sm); box-shadow: var(--sink); font: 600 var(--fs-3)/1 var(--num); color: var(--txt); }
.tx-note { color: var(--txt-mute); font-size: var(--fs-3); line-height: 1.7; margin: var(--s4) 0 0; }
#tx-state { text-align: center; padding: 48px var(--s5); }
.tx-empty-icon { width: 56px; height: 56px; display: grid; place-items: center; margin: 0 auto var(--s5); border-radius: var(--r); color: var(--txt-dim); background: var(--face); box-shadow: var(--slab); }
.tx-empty-icon svg { width: 26px; height: 26px; }
#tx-state h3 { font: 600 var(--fs-7)/1.4 var(--font); margin: 0 0 var(--s2); }
#tx-state p { font-size: var(--fs-4); color: var(--txt-dim); line-height: 1.6; margin: 0 0 var(--s5); }
.tx-page [hidden] { display: none !important; }
.tx-page :is(select, button, a):focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* Respond to the available content width, including an open desktop chat. */
@container (max-width: 820px) {
  .tx-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tx-table, .tx-table tbody { display: block; }
  .tx-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3); padding: var(--s4); border-top: 1px solid var(--line-soft); }
  .tx-table td { padding: 0; border: 0; }
  .tx-activity { grid-column: 1; grid-row: 1; min-width: 0; }
  .tx-status-cell { grid-column: 2; grid-row: 1; justify-self: end; align-self: center; }
  .tx-amount { grid-column: 1; grid-row: 2; text-align: left; }
  .tx-time { grid-column: 1; grid-row: 3; text-align: left; }
  .tx-time time { flex-direction: row; align-items: center; gap: var(--s2); }
  .tx-table td.tx-receipt { grid-column: 2; grid-row: 2 / 4; padding: 0; align-self: end; justify-self: end; }
}
@container (max-width: 540px) {
  .tx-heading { gap: var(--s3); align-items: flex-start; }
  .tx-heading h2 { font-size: 20px; gap: var(--s2); }
  .tx-heading [data-action="refresh"] { width: 44px; padding: 0; flex: none; }
  .tx-heading [data-action="refresh"] span { display: none; }
  .tx-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3); padding: var(--s4); }
  .tx-select select { font-size: var(--fs-3); padding-left: 10px; padding-right: 28px; }
  .tx-select svg { right: 6px; }
  #tx-game-filter { grid-column: 1 / -1; }
  .tx-activity { gap: var(--s2); }
  .tx-activity-icon { width: 32px; height: 36px; border-radius: var(--r-xs); }
  .tx-activity-icon svg { width: 21px; height: 21px; }
  .tx-activity b { font-size: var(--fs-3); }
  .tx-activity small { max-width: 100%; font-size: var(--fs-2); }
  .tx-status { font-size: var(--fs-2); padding: 4px 6px; gap: 4px; }
  .tx-money b { font-size: 16px; }
  .tx-footer { justify-content: center; gap: var(--s3); padding: var(--s4); }
  .tx-pagination-meta { justify-content: center; gap: var(--s3); }
  .tx-footer p { width: 100%; text-align: center; }
  .tx-footer .ha-btn { padding: 0 10px; }
}
@media (max-width: 640px) {
  #ha-account-page.is-transactions .ha-acct-h { font-size: 26px; margin-bottom: var(--s4); }
  #ha-account-page.is-transactions .ha-acct-tabs { width: 100%; margin-bottom: var(--s6); }
  #ha-account-page.is-transactions .ha-acct-tab { flex: 1; padding: 0 var(--s2); font-size: var(--fs-3); }
}