.history-view {
  position: fixed;
  z-index: 12;
  inset: 0;
  display: flex;
  width: min(100vw, 460px);
  height: 100vh;
  height: 100dvh;
  flex-direction: column;
  gap: 13px;
  margin: 0 auto;
  padding:
    calc(max(9px, env(safe-area-inset-top)) + var(--telegram-fullscreen-top-gap, 0px) + 47px)
    17px
    max(106px, calc(100px + env(safe-area-inset-bottom)));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--pvp-page-background);
}

.history-view[hidden] { display: none; }
#history-search-field[hidden], #history-list[hidden], .history-detail[hidden] { display: none; }

body > .app.app--history {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.app--history .game,
.app--history > .topbar,
.app--history > .round-hash { visibility: hidden; }

.history-header {
  display: grid;
  min-height: 37px;
  flex: 0 0 auto;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  gap: 7px;
}

.history-back {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: #3b1552;
  color: #fff;
  font-size: 27px;
  line-height: 1;
  cursor: pointer;
}

.history-header h1 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.4px; }

.history-search {
  display: flex;
  min-height: 42px;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 13px;
  background: #37134e;
  color: #b99ac8;
}

.history-search > span { font-size: 20px; line-height: 1; }
.history-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #fff; font-size: 12px; font-weight: 600; }
.history-search input::placeholder { color: #ab8db9; opacity: 1; }
.history-search input::-webkit-search-cancel-button { cursor: pointer; }

.history-list { display: flex; flex-direction: column; gap: 11px; }

.history-card {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(141, 48, 197, .22), transparent 44%),
    linear-gradient(120deg, #351344, #461660);
  box-shadow: 0 6px 20px rgba(8,0,15,.16);
}

.history-card-heading, .history-winner-row, .history-card-details {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.history-card-heading { display: grid; grid-template-columns: auto minmax(0, 1fr) 25px; }
.history-mode { display: inline-flex; align-items: center; gap: 5px; color: #f7f0fb; font-size: 11px; font-weight: 800; white-space: nowrap; }
.history-mode > span { color: #cfb6db; }
.history-metadata { overflow: hidden; color: #ae8dbd; font-size: 9px; font-weight: 700; text-align: right; text-overflow: ellipsis; white-space: nowrap; }

.history-open-detail {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: rgba(255,255,255,.09);
  color: #d9c3e4;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.history-open-detail:hover, .history-open-detail:focus-visible { background: rgba(255,255,255,.18); outline: none; }
.history-winner-row { justify-content: flex-start; }

.history-winner-avatar {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border: 2px solid rgba(255,255,255,.7);
  border-radius: 50%;
  background: linear-gradient(145deg, #a95be1, #522176);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.history-winner-avatar img,
.history-participant-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.history-winner-details { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.history-winner-details strong { overflow: hidden; color: #fbf7ff; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.history-winner-details > span { color: #62d4ff; font-size: 10px; font-weight: 800; }
.history-prize { color: #60e2ef; font-size: 11px; font-weight: 800; text-align: right; white-space: nowrap; }
.history-card-details { padding-top: 10px; border-top: 1px solid rgba(255,255,255,.07); color: #c1a9cd; font-size: 10px; font-weight: 700; }
.history-players { display: flex; flex-direction: column; gap: 6px; }
.history-participant { display: flex; min-height: 28px; align-items: center; gap: 8px; color: #cfbbd8; font-size: 10px; }
.history-participant > span:nth-child(2) { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-participant strong { color: #76d8ff; font-size: 10px; white-space: nowrap; }
.history-participant-avatar { display: grid; width: 26px; height: 26px; flex: 0 0 auto; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; background: linear-gradient(145deg, #a95be1, #522176); color: #fff; font-size: 10px; font-weight: 800; }
.history-hash { padding-top: 8px; border-top: 1px solid rgba(255,255,255,.06); color: #a98ab7; font-size: 9px; font-weight: 600; }

.history-empty {
  margin: 0;
  padding: 36px 15px;
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 16px;
  background: rgba(55, 19, 76, .7);
  color: #b89ac5;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.history-detail { display: flex; flex: 0 0 auto; flex-direction: column; gap: 13px; }
.history-detail-date { margin: -5px 0 0 44px; color: #ac8abb; font-size: 10px; font-weight: 700; }
.history-proof-list { display: flex; flex-direction: column; gap: 8px; }

.history-proof-row {
  display: flex;
  min-height: 43px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 13px;
  background: #351344;
}

.history-proof-label { color: #b594c4; font-size: 11px; font-weight: 700; }
.history-proof-value { overflow: hidden; padding: 7px 0 7px 8px; border: 0; background: transparent; color: #f5ecfb; font-family: inherit; font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }

.history-detail-winner {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 19px;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(88, 176, 255, .25), transparent 50%),
    linear-gradient(120deg, #3a1c66, #24477a);
  box-shadow: 0 7px 22px rgba(8,0,15,.18);
}

.history-detail-section-title { color: #f7f0fb; font-size: 11px; font-weight: 800; }
.history-detail-player { display: flex; align-items: center; gap: 10px; }
.history-detail-player-info { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 4px; }
.history-detail-player-info strong { overflow: hidden; color: #fff; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.history-detail-player-info span { color: #bda5cf; font-size: 10px; font-weight: 700; }
.history-detail-payout { max-width: 47%; color: #61e0ec; font-size: 11px; font-weight: 800; text-align: right; }

.history-detail-players {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 17px;
  background: rgba(55, 19, 76, .86);
}

.history-detail-section-heading { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 9px; border-bottom: 1px solid rgba(255,255,255,.08); }
.history-detail-section-heading strong { color: #f5ecfb; font-size: 11px; }
.history-detail-section-heading span { color: #c5a9d2; font-size: 10px; font-weight: 700; }
.history-detail-player-row { display: flex; min-height: 30px; align-items: center; gap: 8px; color: #d5c2dd; font-size: 11px; }
.history-detail-player-row > span:nth-child(2) { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-detail-player-row .history-participant-avatar { width: 28px; height: 28px; }
.history-detail-player-row strong { color: #69d5ff; font-size: 10px; white-space: nowrap; }
.history-detail-empty { margin: 0; color: #b89ac5; font-size: 11px; text-align: center; }