/* Regras da recriação (não existem no play.css original de jan/2022, que fica intacto). */

/* Airport auctions (recreation): history rows of a bid (`auction`, a debit, see .value.auction)
   and of the refund of a losing pool's bid (`auction_refund`, a credit). */
.value.auction_refund::before {
  content: '+';
}

.type.auction,
.type.auction_refund {
  font-family: Saira, sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 20px;
  line-height: 24px;
}

.type.auction {
  color: #EA5C5C;
}

.type.auction_refund {
  color: #A8E26E;
}

.transaction-icon.auction .status.success {
  background-image: url(/img/transactions/minus.png);
  background-size: cover;
}

.transaction-icon.auction_refund .status.success {
  background-image: url(/img/transactions/plus.png);
  background-size: cover;
}

.transaction-icon img.auction,
.transaction-icon img.auction_refund {
  content: url(/img/transactions/money.png);
}

/* ---- Revisão visual (QA de consistência e responsividade) ---- */

/* Planes header (REFUEL / BUY NEW BOX / ITEM BOX / REWARDS OF SOLD PLANES): the label is centred on
   the bottom edge of the 60 px icon (play.css), so a 3-line label ("REFUEL (18 CPAN)") covered half
   of the flask. Anchor the first line where a 2-line label starts in the original screenshots
   (15 px above the edge) and let longer labels grow downwards. */
.btn-image .text.center {
  -ms-transform: translate(-50%, -15px);
  transform: translate(-50%, -15px);
}

/* On phones the fourth header button (ITEM BOX, new) made the row wrap 3 + 1, leaving REWARDS OF
   SOLD PLANES alone on a line: lay the four out as a 2 x 2 grid there. */
@media (max-width: 575.98px) {
  .d-flex.flex-wrap.text-end:has(> .btn-image) {
    width: 100%;
  }
  .d-flex.flex-wrap.text-end > .btn-image {
    flex: 0 0 50%;
  }
}

/* Plane card stats between 1200 and 1399 px (3 cards of 356 px): "Power: 153.9" no longer fits its
   half of the well and the value dropped to a second line. Narrower gutters keep label and value
   on one line, as in the original marketplace screenshots (taken at a wider viewport). */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .asset-stats {
    padding-left: 8px;
    padding-right: 8px;
  }
  .asset-stats > .stats {
    padding-left: 6px;
    padding-right: 6px;
  }
  .asset-stats .asset-stat-text {
    margin-left: 2px !important;
    margin-right: 0 !important;
  }
}

/* Modal close buttons centred on the top-right corner (item box, open slot, buy/sell shares) stuck
   out of the screen on phones: tuck them inside the corner there. */
@media (max-width: 575.98px) {
  .modal-dialog .close-btn.start-100.translate-middle {
    transform: translate(-90%, -10%) !important;
  }
}

/* .btn-orange is used by the airports screens (Sell shares, Load more, Refresh) but no archived CSS
   defines it: it rendered as a light-grey button with cream text. Same recipe as .btn-yellow. */
.btn-game.btn-orange {
  background: #F7A23B;
  box-shadow: inset 0px 2px 0px rgba(255, 255, 255, 0.3), inset 0px -5px 0px rgba(0, 0, 0, 0.1);
}

/* <select class="form-control"> (Add to Auction Pool) looked like a white text field without an
   arrow: same well as input.form-control, plus Bootstrap's select arrow. */
select.form-control {
  background-color: rgba(1, 1, 1, 0.1) !important;
  box-shadow: inset 2px 2px 0px rgba(0, 0, 0, 0.2) !important;
  border-radius: 10px !important;
  color: #3E382B;
  cursor: pointer;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
}

/* Stake card: ADD TO AUCTION POOL / CANCEL / SUBMIT took the 24 px of .btn-game next to the 18 px
   UNSTAKE of the same card. */
.card-item .btn-game.btn-rounded.btn-block {
  font-size: 18px;
}

/* Item list of "Select item to attach": the "Increase N stat" line was centred under long names. */
#confirm-attach-item .item-box-item > .flex-column {
  text-align: left;
}

/* Item card (YOUR ITEMS, ITEM BOX REWARD): the stat icon showed at its 34 px source size. */
.item-box > div > img:not(.item-img) {
  width: 22px;
  height: 22px;
  margin-right: 2px;
  vertical-align: -5px;
}

/* Phoenix vs Fishie on phones: "Total 350 CPAN" (36 px) broke in two lines and the
   "Already bet N CPAN" button in three. */
@media (max-width: 575.98px) {
  img[src="/img/pvf_title.png"] {
    max-width: 100% !important;
  }
  .pvf-component .row.p-2 .saira {
    font-size: 28px !important;
  }
  .pvf-component .col-6 > .btn-game.btn-block:disabled {
    font-size: 15px;
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* Airport auction modal (2022 template, never shipped): below 992 px it is full screen
   (.modal-fullscreen-lg-down) but kept its inline max-width of 700 px, so on tablets it sat on the
   left with the page showing on the right. */
@media (max-width: 991.98px) {
  #auction-info .modal-dialog.modal-fullscreen-lg-down {
    max-width: none !important;
  }
}

/* Auction modals: the 2022 templates use stock Bootstrap controls (thin X, outline buttons,
   btn-danger). Give them the game's look, like the other modals and buttons of the game. */
#auction-info .btn-close,
#confirm-bid .btn-close {
  width: 40px;
  height: 40px;
  padding: 0;
  opacity: 1;
  background: url(/img/btn-close.png) center / contain no-repeat;
  box-shadow: none;
}

#auction-info .btn-close:hover,
#confirm-bid .btn-close:hover {
  opacity: 0.85;
}

/* The airport cards (/cw2/{SIN,GRU,DXB,FRA,JFK,HKG}.png) carry the IATA code badge, plane icon
   first, in their top-left corner, under the close button of both airport modals: the auction modal
   puts it at top 20px / left 10px of the art (inline style) at any width, and the airport modal at
   its top-left corner, which covers the art once its 24 px frame shrinks to 8 px on phones. The
   button goes to the top-right corner instead, sky in every card. */
#auction-info .modal-header .btn-close {
  z-index: 2;
  left: auto !important;
  right: 10px;
}

@media (max-width: 575.98px) {
  #workshop-info .modal-header > button[data-bs-dismiss="modal"] {
    left: auto;
    right: 0;
  }
}

#auction-info h5,
#confirm-bid h5 {
  font-family: 'Saira', sans-serif;
  font-weight: 800;
  color: #2B79A7;
}

#confirm-bid h5 {
  align-self: center;
  margin-bottom: 0;
}

#auction-info .pool-item .card {
  border: 1px solid #D8C8B4;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0px -3px 0px rgba(0, 0, 0, 0.1);
}

#auction-info .btn-bid,
#auction-info .btn-outline-secondary,
#auction-info .btn-primary,
#confirm-bid .btn-warning,
#confirm-bid .btn-danger {
  font-family: 'Saira Semi Condensed', sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  color: #FFF2DE;
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.3);
  border: 0;
  border-radius: 10px;
  box-shadow: inset 0px 2px 0px rgba(255, 255, 255, 0.3), inset 0px -4px 0px rgba(0, 0, 0, 0.12);
}

#auction-info .btn-bid {
  background: #87C847;
  padding: 2px 16px 5px;
  font-size: 16px;
}

#auction-info .btn-outline-secondary {
  background: #2B79A7;
  padding: 6px 16px 9px;
  line-height: 1;
}

#auction-info .btn-primary {
  background: #87C847;
  padding: 4px 18px 7px;
}

#confirm-bid .btn-warning {
  background: #FDBF47;
  padding: 6px 16px 9px;
}

#confirm-bid .btn-danger {
  background: #87C847;
  padding: 8px 40px 11px;
  font-size: 20px;
}

#auction-info .btn-bid:not(:disabled):hover,
#auction-info .btn-outline-secondary:hover,
#auction-info .btn-primary:hover,
#confirm-bid .btn-warning:hover,
#confirm-bid .btn-danger:hover {
  color: #FFF2DE;
  opacity: 0.85;
}

#auction-info .btn-bid:disabled {
  background: #CCCCCC;
  box-shadow: inset 0px -4px 0px #A4A4A4;
  color: #585858;
}

/* Shareholder tables (airport modal and completed auction): a full wallet address in the first
   column pushed the Share column out of the modal on phones. */
#nav-holders .table tbody th,
#auction-info .table tbody th {
  overflow-wrap: anywhere;
}

#nav-holders .table td:last-child,
#auction-info .table td:last-child {
  white-space: nowrap;
}

/* Airport modal on phones: "Total" and "Your Share" sat in two col-4 boxes (100 px), which cut
   "10.000000%" in the middle of the number. */
@media (max-width: 575.98px) {
  #workshop-info .card-body .row > .col-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* Rewards of a plane on phones: the 5 columns (type, time, position, CPAN, EXP) were wider than
   the modal and the EXP column was cut at the right edge. Tighter cells make them fit at 390 px. */
@media (max-width: 575.98px) {
  .rewards-body .table {
    font-size: 12px;
  }
  .rewards-body .table > :not(caption) > * > * {
    padding: 6px 3px;
  }
  .rewards-body .table tr > :first-child {
    padding-left: 8px;
  }
  .rewards-body td .reward-type {
    font-size: 11px;
    padding: 3px 7px;
  }
}

#confirm-bid .input-group-text {
  background: #D8C8B4;
  border: 0;
  border-radius: 0 10px 10px 0;
  color: #3E382B;
}

/* ---- Área administrativa (docs/ADMIN.md) ---- */

/* Aviso / mensagem de manutenção no cabeçalho do jogo (GET /info: announcement, maintenance). Pendurado
   logo abaixo da barra fixa (sem mexer no layout original dela); app-header.js empurra a página pela
   altura do aviso. */
.header-bar .recreation-notice {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 5px 16px 6px;
  font-family: Saira, sans-serif;
  font-weight: 800;
  font-size: 15px;
  line-height: 20px;
  text-align: center;
  color: #FFF2DE;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
  background: #2B79A7;
  box-shadow: inset 0px 2px 0px rgba(255, 255, 255, 0.2), inset 0px -3px 0px rgba(0, 0, 0, 0.12);
  overflow-wrap: anywhere;
}

.header-bar .recreation-notice-warning {
  background: #F7A23B;
}

.header-bar .recreation-notice-danger {
  background: #EA5C5C;
}

.header-bar .recreation-notice-success {
  background: #87C847;
}

/* Histórico: ajuste de saldo feito pela equipe (admin_adjust; crédito ou débito, a nota diz qual) e
   devolução de um saque rejeitado (withdraw_refund, crédito). */
.value.withdraw_refund::before {
  content: '+';
}

.type.admin_adjust,
.type.withdraw_refund {
  font-family: Saira, sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 20px;
  line-height: 24px;
}

.type.admin_adjust {
  color: #6ECDE2;
}

.type.withdraw_refund {
  color: #A8E26E;
}

.transaction-icon.admin_adjust .status.success {
  background-image: url(/img/transactions/checkmark.png);
  background-size: cover;
}

.transaction-icon.withdraw_refund .status.success {
  background-image: url(/img/transactions/plus.png);
  background-size: cover;
}

.transaction-icon img.admin_adjust,
.transaction-icon img.withdraw_refund {
  content: url(/img/transactions/money.png);
}

/* Solana "Connect Wallet" modal (wallet-modal): one row per detected wallet (icon + name), in the
   colors of the game modals; with no wallet, the in-app browser links and "Install Phantom". */
.wallet-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wallet-option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 10px 16px;
  border: 1px solid #D8C8B4;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.08);
  color: #3E382B;
  text-align: left;
}

.wallet-option:hover,
.wallet-option:focus-visible {
  background: #FFF2DE;
  border-color: #6ECDE2;
}

.wallet-option-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 8px;
}

.wallet-option-name {
  flex-grow: 1;
  font-size: 20px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.wallet-option-note {
  flex-shrink: 0;
  font-size: 12px;
  color: #888EAE;
}

.wallet-empty {
  color: #3E382B;
  margin-bottom: 12px;
}

/* The game's confirm / alert (components/cp-dialog.js): an overlay of its own, above any open modal. */
.cp-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.55);
}

.cp-dialog {
  width: 100%;
  max-width: 400px;
  padding: 28px 24px 24px;
}

.cp-dialog-message {
  margin: 0;
  color: #3E382B;
  font-size: 17px;
  text-align: center;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* The deposit amount modal (components/deposit-modal.js): the same card as the "Connect Wallet" modal. */
.deposit-label {
  display: block;
  margin-bottom: 8px;
  color: #3E382B;
}

.deposit-input {
  font-size: 20px;
}

.deposit-hint {
  margin-top: 8px;
  color: #888EAE;
}

.deposit-error {
  margin-top: 8px;
  color: #C0392B;
  font-weight: bold;
}

/* An offered wallet that is not here (decisão do time, 2026-10-19): the same card as a found one, a link,
   with what it does (install, open in the app, turn Solana on) as the note. */
a.wallet-option,
a.wallet-option:hover,
a.wallet-option:focus-visible {
  color: #3E382B;
  text-decoration: none;
}

.wallet-install .wallet-option-note {
  color: #2B8CCA;
  font-weight: bold;
}

/* Economy (reward pool mode, docs/ECONOMIA.md): the line under the race reward when the CPAN was
   reduced (daily budget, plane of the day or account limit). */
.economy-notice {
  max-width: 420px;
  color: #ffe08a;
  font-size: 13px;
  line-height: 17px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Language switch of the header (recreation, docs/I18N.md): the same box as the balance and the
   address, the language code in the header yellow and a globe where they have an icon; the menu is
   the game's dropdown (play.css). Collapsed (phones) it is one more row of the menu. */
.language-select .nav-box {
  white-space: nowrap;
}

.language-select .dropdown-menu {
  min-width: 10rem;
}

/* Translations are longer than "Buy"/"Cancel": on phones the order book buttons lose some side padding
   so the four columns still fit the airport modal at 390 px. */
@media (max-width: 575.98px) {
  #nav-buy-sell-shares .btn-small {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
}

@media (max-width: 991.98px) {
  .language-select .dropdown-menu {
    position: static;
    margin: 4px 0 8px;
  }
}

/* Withdraw modal (docs/SOLANA.md "Saques"): the network fee line, the destination, why a withdraw
   is not available now, and the state of a request after Confirm (play.css stays the original). */
#modal-withdraw .withdraw-fee-breakdown,
#modal-withdraw .withdraw-destination {
  font-size: 14px;
  margin-top: -8px;
}

#modal-withdraw .withdraw-unavailable {
  color: #C0392B;
  font-weight: bold;
}

/* Earned CPAN on hold while the account is new (docs/ECONOMIA.md §13): what can leave now and why. */
#modal-withdraw .withdraw-vesting p {
  font-size: 14px;
}

#modal-withdraw .withdraw-held {
  color: #8a6d00;
}

#modal-withdraw .withdraw-state {
  text-align: center;
}

#modal-withdraw .withdraw-state-title {
  font-size: 20px;
  margin-bottom: 8px;
}

#modal-withdraw .withdraw-state.requested .withdraw-state-title {
  color: #B7791F;
}

#modal-withdraw .withdraw-state.approved .withdraw-state-title,
#modal-withdraw .withdraw-state.sending .withdraw-state-title {
  color: #2B8CCA;
}

#modal-withdraw .withdraw-state.sent .withdraw-state-title {
  color: #3E8E2F;
}

#modal-withdraw .withdraw-state.failed .withdraw-state-title {
  color: #C0392B;
}

#modal-withdraw .withdraw-state.refunded .withdraw-state-title {
  color: #6B6257;
}

#modal-withdraw .withdraw-explorer {
  color: #2B8CCA;
  font-weight: bold;
  word-break: break-all;
}

/* ---- PvP assíncrono: melhor tempo do dia (docs/PVP.md) ----
   Tela /pvp (abas por faixa, seus aviões, ranking do dia), a corrida contra-relógio (a mesma cena da
   corrida de treino, com o avião sozinho contra marcadores-fantasma dos melhores tempos) e o histórico.
   Cores e fontes do jogo: bege #E8DED1 dos cards, ardósia #2A3B55 do PvF, cores de raridade. */
.pvp-subtitle,
.pvp-rules {
  color: #C7C7C7;
  font-size: 13px;
}

.pvp-rules {
  font-size: 12px;
  line-height: 20px;
}

.pvp-closes {
  color: #FFF2DE;
  background: #2A3B55;
  border-radius: 10px;
  padding: 4px 16px 6px;
  font-size: 20px;
  line-height: 24px;
  box-shadow: inset 0px -4px 0px rgba(0, 0, 0, 0.15);
}

.pvp-closes-label {
  font-size: 12px;
  line-height: 16px;
  color: #6ECDE2;
  text-transform: uppercase;
}

.pvp-tier {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 140px;
  padding: 6px 18px 9px;
  border: 0;
  border-radius: 10px;
  font-family: 'Saira Semi Condensed', sans-serif;
  font-weight: bold;
  font-size: 18px;
  line-height: 20px;
  color: #FFF2DE;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
  background: #344E76;
  box-shadow: inset 0px 2px 0px rgba(255, 255, 255, 0.2), inset 0px -5px 0px rgba(0, 0, 0, 0.15);
  opacity: 0.8;
}

.pvp-tier:hover {
  opacity: 1;
}

.pvp-tier.active {
  opacity: 1;
  transform: translateY(-2px);
}

.pvp-tier-classic.active {
  background: #4FB2C8;
}

.pvp-tier-super.active {
  background: #E9A82E;
}

.pvp-tier-rare.active {
  background: #EA5C5C;
}

.pvp-tier-count {
  font-family: Lexend, sans-serif;
  font-weight: normal;
  font-size: 12px;
  text-transform: none;
}

.pvp-panel {
  background: #E8DED1;
  border-radius: 20px;
  padding: 16px;
  color: #394C4B;
  height: 100%;
}

.pvp-panel.pvp-board {
  background: #2A3B55;
  color: #FFF2DE;
}

.pvp-note {
  font-size: 13px;
  color: #7A6A58;
}

.pvp-board .pvp-note {
  color: #C7C7C7;
}

.pvp-warning {
  color: #FDBF47;
}

.pvp-empty {
  padding: 24px 8px;
  font-family: 'Saira Semi Condensed', sans-serif;
  font-weight: bold;
  font-size: 16px;
  text-transform: uppercase;
  opacity: 0.8;
}

.pvp-plane {
  padding: 6px 8px;
  margin-bottom: 8px;
  border: 1px solid #D8C8B4;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.06);
}

.pvp-plane-img img {
  object-fit: contain;
}

.pvp-rarity {
  position: absolute;
  top: -4px;
  left: 0;
  font-family: 'Saira Semi Condensed', sans-serif;
  font-weight: bold;
  font-size: 10px;
  line-height: 14px;
  padding: 0 5px;
  border-radius: 6px;
  color: #FFFFFF;
  text-transform: uppercase;
  background: #6ECDE2;
}

.pvp-rarity.Common {
  background: #87C847;
}

.pvp-rarity.Super {
  background: #E9A82E;
}

.pvp-rarity.Rare,
.pvp-rarity.Limited,
.pvp-rarity.Legendary {
  background: #EA5C5C;
}

.pvp-plane-info .asset-name {
  font-size: 17px;
  line-height: 22px;
}

.pvp-plane-line {
  font-size: 13px;
  line-height: 18px;
}

.pvp-fuel-icon {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
}

.pvp-reason {
  color: #D01E06;
  font-size: 12px;
}

.pvp-token {
  font-family: 'Saira Semi Condensed', sans-serif;
  font-weight: bold;
  font-size: 13px;
  color: #929292;
}

.pvp-board .pvp-token,
.pvp-history-table .pvp-token {
  color: #8FA3BD;
}

.pvp-race-button {
  flex-shrink: 0;
  min-width: 96px;
  padding-left: 10px;
  padding-right: 10px;
}

.pvp-race-button .pvp-fee {
  font-size: 12px;
  text-transform: none;
}

.pvp-pot {
  color: #A8E26E;
  font-size: 18px;
}

.pvp-table {
  color: #FFF2DE;
  font-size: 14px;
}

.pvp-table > :not(caption) > * > * {
  background: transparent;
  border-bottom: 1px dashed rgba(110, 205, 226, 0.35);
  padding: 6px 6px;
  vertical-align: middle;
}

.pvp-table th {
  color: #6ECDE2;
  font-family: 'Saira Semi Condensed', sans-serif;
  font-size: 13px;
  text-transform: uppercase;
}

.pvp-table td {
  color: #FFF2DE;
}

.pvp-row[data-you="true"] > td,
.pvp-history-table .pvp-row[data-you="true"] > td {
  background: rgba(253, 191, 71, 0.18);
}

.pvp-row-name {
  font-family: 'Saira Semi Condensed', sans-serif;
  font-weight: bold;
}

.pvp-table td.pvp-owner {
  font-size: 12px;
  color: #C7C7C7;
}

.pvp-time {
  font-variant-numeric: tabular-nums;
}

.pvp-prize {
  color: #A8E26E;
  font-weight: bold;
}

.pvp-refund {
  color: #6ECDE2;
  font-size: 12px;
}

.pvp-you {
  display: inline-block;
  padding: 0 6px;
  border-radius: 6px;
  font-family: 'Saira Semi Condensed', sans-serif;
  font-weight: bold;
  font-size: 11px;
  line-height: 16px;
  text-transform: uppercase;
  color: #2A3B55;
  background: #FDBF47;
}

.pvp-seed {
  font-size: 11px;
  color: #8FA3BD;
  overflow-wrap: anywhere;
}

.pvp-status {
  font-size: 12px;
  color: #ECD2B4;
}

.pvp-history-row {
  cursor: pointer;
}

/* Bootstrap 5.0 paints the odd rows of .table-striped with a dark text colour: keep the light text of
   the blue modals (the reward history sets it cell by cell). */
.pvp-history-table {
  --bs-table-striped-color: #E8DED1;
}

.pvp-history-table > :not(caption) > * > * {
  color: #E8DED1;
}

.pvp-history-table td small {
  color: #ECD2B4;
}

.pvp-captcha-plane {
  font-size: 14px;
  color: #7A6A58;
}

/* The time trial: the training scene (.virtual-training) with the race clock and one lane per racer;
   your plane against the ghosts of today's best times (faded), the finish line on the right. */
.pvp-clock {
  position: absolute;
  top: 10px;
  right: 14px;
  z-index: 2;
  font-size: 30px;
  color: #FFF2DE;
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.45);
  font-variant-numeric: tabular-nums;
}

.pvp-lane-name {
  width: 120px;
  flex-shrink: 0;
  line-height: 14px;
  min-width: 0;
}

.pvp-lane-name .asset-name {
  font-size: 14px;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pvp-lane-name small {
  font-size: 11px;
  text-transform: uppercase;
}

.pvp-lane-track {
  position: relative;
  height: 28px;
  margin: 0 16px 0 6px;
  border-radius: 14px;
  background: repeating-linear-gradient(90deg, rgba(57, 76, 75, 0.12) 0 12px, transparent 12px 24px);
}

.pvp-lane-track::after {
  content: '';
  position: absolute;
  top: 0;
  right: -6px;
  width: 6px;
  height: 100%;
  background: repeating-linear-gradient(0deg, #394C4B 0 4px, #FFFFFF 4px 8px);
}

.pvp-marker {
  position: absolute;
  top: 50%;
  width: 28px;
  height: 28px;
  object-fit: contain;
  transform: translate(-50%, -50%) rotate(90deg);
  transition: left 0.1s linear;
}

.pvp-lane[data-ghost="true"] .pvp-marker {
  opacity: 0.45;
  filter: grayscale(0.5);
}

.pvp-lane[data-ghost="true"] .asset-name {
  opacity: 0.75;
}

.pvp-lane-time {
  width: 72px;
  flex-shrink: 0;
  text-align: right;
  font-size: 14px;
  color: #394C4B;
  font-variant-numeric: tabular-nums;
}

.pvp-result-time {
  font-size: 44px;
  line-height: 48px;
  color: #FFF2DE;
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.3);
  font-variant-numeric: tabular-nums;
}

.pvp-new-best {
  font-size: 20px;
  color: #FDBF47;
}

.pvp-result-best,
.pvp-result-line {
  color: #E8DED1;
  font-size: 15px;
}

.pvp-ok {
  max-width: 240px;
}

@media (max-width: 575.98px) {
  .pvp-tier {
    min-width: 0;
    flex: 1 1 30%;
    padding: 6px 8px 9px;
    font-size: 15px;
  }
  .pvp-panel {
    padding: 12px 10px;
  }
  .pvp-table {
    font-size: 13px;
  }
  .pvp-table > :not(caption) > * > * {
    padding: 5px 3px;
  }
  .pvp-lane-name {
    width: 76px;
  }
  .pvp-lane-name .asset-name {
    font-size: 12px;
  }
  .pvp-lane-time {
    width: 58px;
    font-size: 12px;
  }
  .pvp-lane-track {
    margin: 0 10px 0 2px;
  }
  .pvp-clock {
    font-size: 24px;
  }
}

/* Planes header: the PVP button (red, like the race button of the cards). */
.btn-image.red:hover .text {
  color: #ffffff;
  text-shadow:
          -1px -1px 0 #9E2B2B,
          0   -1px 0 #9E2B2B,
          1px -1px 0 #9E2B2B,
          1px  0   0 #9E2B2B,
          1px  1px 0 #9E2B2B,
          0    1px 0 #9E2B2B,
          -1px  1px 0 #9E2B2B,
          -1px  0   0 #9E2B2B;
}

/* Account history: a PvP try (`pvp`, a debit), a prize and a refund (credits). */
.value.pvp::before {
  content: '-';
}

.value.pvp_prize::before,
.value.pvp_refund::before {
  content: '+';
}

.type.pvp,
.type.pvp_prize,
.type.pvp_refund {
  font-family: Saira, sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 20px;
  line-height: 24px;
}

.type.pvp {
  color: #EA5C5C;
}

.type.pvp_prize,
.type.pvp_refund {
  color: #A8E26E;
}

.transaction-icon.pvp .status.success {
  background-image: url(/img/transactions/minus.png);
  background-size: cover;
}

.transaction-icon.pvp_prize .status.success,
.transaction-icon.pvp_refund .status.success {
  background-image: url(/img/transactions/plus.png);
  background-size: cover;
}

.transaction-icon img.pvp,
.transaction-icon img.pvp_prize {
  content: url(/img/icon_pvp.png);
}

.transaction-icon img.pvp_refund {
  content: url(/img/transactions/money.png);
}

/* Staking extras (recreation, team decision of 2026-10-16; layout of the approved staking mockup):
   time-limited pool with a ribbon, pool badge, fill and wallet-limit bars, the stake modal with its
   calculator and the early exit modal. Colors from play.css. */
.stk-pool--limited {
  box-shadow: 0 0 0 3px #FDBF47, 0 0 28px rgba(253, 191, 71, 0.4);
}

.stk-ribbon {
  position: absolute;
  top: 18px;
  left: -14px;
  z-index: 2;
}

.stk-ribbon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  border-top: 8px solid #9E3434;
  border-left: 6px solid transparent;
}

.stk-ribbon span {
  display: block;
  padding: 7px 22px 8px 14px;
  background: #EA5C5C;
  color: #FFF2DE;
  font: 600 15px/1 'Saira Semi Condensed', sans-serif;
  letter-spacing: 0.03em;
  white-space: nowrap;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -3px 0 rgba(0, 0, 0, 0.1);
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%);
}

.stk-badge {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 12px;
  border-radius: 12px;
  background: #FDE39B;
  border: 1px solid #D9A63A;
  color: #4A3510;
  font: 600 13px/1.35 Lexend, sans-serif;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.1);
}

.stk-badge i {
  color: #E8890C;
}

.stk-closing {
  color: #BF3A30;
}

.stk-cap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 10px;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}

.stk-warn {
  color: #BF3A30;
  font-weight: bold;
}

.stk-muted {
  color: #6B6153;
}

.stk-track {
  display: flex;
  height: 10px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(1, 1, 1, 0.1);
  box-shadow: inset 1px 2px 0 rgba(0, 0, 0, 0.2);
}

.stk-track.thin {
  height: 6px;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.2);
}

.stk-track.is-big {
  height: 14px;
}

.stk-seg {
  height: 100%;
  flex: none;
  background: #6ECDE2;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3);
}

.stk-seg.is-limited {
  background: linear-gradient(90deg, #FDBF47, #F7A23B);
}

.stk-seg.is-near {
  background: #F7A23B;
}

.stk-seg.is-mine {
  background: #2B79A7;
  box-shadow: none;
}

.stk-seg.is-new {
  background: #6ECDE2;
  box-shadow: none;
}

.stk-seg.is-over {
  background: #EA5C5C;
  box-shadow: none;
}

.stk-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0;
  color: #6B6153;
  font-size: 12.5px;
  line-height: 1.45;
}

.stk-note.is-warn {
  color: #BF3A30;
  font-weight: 600;
}

.stk-exit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-bottom: 10px;
}

.stk-exit-row small {
  color: #6B6153;
}

.stk-exit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
  font: 700 14px/1 'Saira Semi Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #BF3A30;
  background: transparent;
  border: 1.5px solid #EA5C5C;
  border-radius: 8px;
  padding: 6px 11px 7px;
}

.stk-exit:hover {
  background: rgba(234, 92, 92, 0.12);
}

/* staking modals */
.stk-dialog {
  max-width: 500px;
}

.stk-modal {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 26px 24px 24px;
  color: #212529;
  font-size: 14.5px;
}

.stk-modal p {
  margin: 0;
}

.stk-x {
  position: absolute;
  top: 12px;
  right: 12px;
}

.stk-title {
  margin: 0;
  padding-right: 44px;
  font: 800 22px/1.2 Saira, sans-serif;
  color: #2B79A7;
}

.stk-modal .stk-sub {
  margin-top: -8px;
  color: #6B6153;
  font-size: 13.5px;
}

.stk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.stk-chips span {
  padding: 3px 10px;
  border-radius: 8px;
  background: rgba(1, 1, 1, 0.1);
  font: 600 13px/1.4 Lexend, sans-serif;
  font-variant-numeric: tabular-nums;
}

.stk-field,
.stk-calc {
  grid-template-columns: minmax(0, 1fr);
}

.stk-field {
  display: grid;
  gap: 8px;
}

.stk-label {
  font: 700 13px/1 'Saira Semi Condensed', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2B79A7;
}

.stk-ig {
  display: flex;
  align-items: stretch;
  height: 50px;
}

.stk-max {
  border: 0;
  cursor: pointer;
  padding: 0 16px;
  border-radius: 10px 0 0 10px;
  background: #FDBF47;
  color: #FFF2DE;
  font: 700 17px/1 'Saira Semi Condensed', sans-serif;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -4px 0 rgba(0, 0, 0, 0.1);
}

.stk-ig input {
  flex: 1;
  min-width: 0;
  border: 1px solid #CDBDA8;
  border-left: 0;
  border-right: 0;
  padding: 0 14px;
  background: rgba(1, 1, 1, 0.1);
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.2);
  color: #3E382B;
  font: 800 21px/1 Saira, sans-serif;
  font-variant-numeric: tabular-nums;
}

.stk-ig input:focus {
  outline: none;
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 2px #2B79A7;
}

.stk-ig.is-bad input {
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 2px #EA5C5C;
}

.stk-addon {
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 0 10px 10px 0;
  background: #D8C8B4;
  color: #3E382B;
  font: 600 15px/1 Lexend, sans-serif;
}

.stk-hint {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 12px;
  font-size: 13px;
  color: #6B6153;
}

.stk-hint b {
  color: #212529;
}

.stk-err {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  color: #BF3A30;
  font-weight: 600;
  font-size: 14px;
}

.stk-calc {
  display: grid;
  gap: 10px;
  padding: 12px 15px 14px;
  border: 1px solid #D8C8B4;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.4);
}

.stk-calc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
}

.stk-calc-big {
  font: 800 24px/1.1 Saira, sans-serif;
  color: #3B7A1A;
  font-variant-numeric: tabular-nums;
}

.stk-calc.is-off .stk-calc-big,
.stk-calc.is-off .stk-calc-get b {
  color: #6B6153;
}

.stk-calc-limit {
  padding-top: 10px;
  border-top: 1px solid #D8C8B4;
  font-size: 13.5px;
}

.stk-actions .btn-game {
  flex: 1 1 0;
  min-width: 0;
  white-space: normal;
}

.stk-xt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 0;
  font-size: 14.5px;
}

.stk-xt dt,
.stk-xt dd {
  margin: 0;
  padding: 9px 0;
  border-bottom: 1px solid #D8C8B4;
  font-weight: normal;
}

.stk-xt dd {
  text-align: right;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-left: 12px;
}

.stk-xt .neg {
  color: #BF3A30;
}

.stk-xt .get {
  border-bottom: 0;
  padding-top: 11px;
  font: 800 22px/1.2 Saira, sans-serif;
}

.stk-xt dt.get {
  font: bold 16px/1.6 Lexend, sans-serif;
}

.stk-prize {
  display: flex;
  gap: 8px;
  align-items: center;
  font-weight: 600;
}

.stk-prize i {
  color: #E8890C;
}

.stk-ruler {
  padding: 28px 2px 0;
}

.stk-ruler-track {
  position: relative;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, #EA5C5C 0%, #F7A23B 55%, #FDBF47 100%);
  box-shadow: inset 1px 2px 0 rgba(0, 0, 0, 0.2);
}

.stk-ruler-past {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 6px 0 0 6px;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0 4px, transparent 4px 8px);
}

.stk-ruler-pin {
  position: absolute;
  top: -6px;
  bottom: -6px;
  width: 4px;
  margin-left: -2px;
  border-radius: 2px;
  background: #212529;
}

.stk-ruler-tag {
  position: absolute;
  bottom: calc(100% + 9px);
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 3px 8px;
  border-radius: 6px;
  background: #212529;
  color: #E8DED1;
  font: 700 13px/1.2 'Saira Semi Condensed', sans-serif;
}

.stk-ruler-scale {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 9px;
  font-size: 12.5px;
  color: #6B6153;
}

.stk-ruler-scale span:last-child {
  text-align: right;
}

.stk-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(234, 92, 92, 0.12);
  border: 1px solid #EA5C5C;
  cursor: pointer;
  font-weight: 600;
}

.stk-check input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  flex: none;
  accent-color: #BF3A30;
  cursor: pointer;
}

@media (max-width: 575.98px) {
  .stk-modal {
    padding: 22px 16px 20px;
  }

  .stk-title {
    font-size: 20px;
  }

  .stk-actions {
    flex-direction: column-reverse;
  }

  .stk-ribbon span {
    font-size: 14px;
  }
}

/* Anti-bot: the captcha of a low-trust account (components/captcha-prompt.js), a little larger than
   the 150x50 picture of the original modals. */
#captcha-prompt .captcha-image svg {
  width: 240px;
  height: 80px;
  max-width: 100%;
}

/* Waiting room: the boarding line of new logins when the server is full (components/waiting-room.js),
   the place in line large, in the colors of the original modals. */
#waiting-room .waiting-room-label {
  color: #3E382B;
  font-size: 14px;
  letter-spacing: 0.5px;
}

#waiting-room .waiting-room-number {
  color: #3E382B;
  font-size: 44px;
  line-height: 1.1;
}

#waiting-room .waiting-room-eta {
  font-weight: 700;
}

/* ---- Plane upgrades with materials (docs/UPGRADES.md; components/upgrades.js) ---- */

/* The strip on the plane card: one chip per upgrade (engine orange, body blue, weapons red; grey at 0). */
.upgrade-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0 8px;
  border-radius: 10px;
  font-family: "Saira Semi Condensed", sans-serif;
  font-weight: bold;
  font-size: 12px;
  line-height: 20px;
  color: #fff;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2);
}
.upgrade-chip.engine { background: #E8892B; }
.upgrade-chip.body { background: #3F8FD8; }
.upgrade-chip.weapons { background: #D84B4B; }
.upgrade-chip.zero { background: #B9AC98; }
.plane-upgrades .upgrade-open {
  padding: 4px 12px;
  font-size: 13px;
  white-space: nowrap;
}

/* UPGRADE PLANE: the blue modal of the fix screen, with the dark panel of the "UPGRADE PLANE" mockup (GAMEPLAY5.png). */
#upgrade-plane .upgrade-title {
  margin: 8px 0 0;
  font-size: 30px;
  line-height: 44px;
  color: #fff;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .25);
}
#upgrade-plane .upgrade-plane-img {
  width: 220px;
  max-width: 70%;
  margin: 0 auto;
}
#upgrade-plane .upgrade-plane-img img {
  width: 100%;
}
.upgrade-panel {
  padding: 4px 14px;
  border-radius: 18px;
  background: rgba(14, 33, 56, .55);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .08);
}
.upgrade-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
}
.upgrade-row + .upgrade-row {
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.part-icon {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #fff;
  background: radial-gradient(circle at 50% 40%, #3B4C5E, #1D2733);
  border: 4px solid #87C847;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .3);
}
.part-icon.engine { border-color: #E8892B; color: #FFD2A6; }
.part-icon.body { border-color: #3F8FD8; color: #CFE3FF; }
.part-icon.weapons { border-color: #D84B4B; color: #FFC2C2; }
.upgrade-level {
  margin-left: 6px;
  font-size: 13px;
  color: #FDBF47;
}
.upgrade-pips {
  display: flex;
  gap: 3px;
  margin: 2px 0 4px;
}
.upgrade-pips span {
  width: 14px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .22);
}
.upgrade-row.engine .upgrade-pips span.on { background: #E8892B; }
.upgrade-row.body .upgrade-pips span.on { background: #3F8FD8; }
.upgrade-row.weapons .upgrade-pips span.on { background: #D84B4B; }
.upgrade-cost,
.upgrade-note {
  color: #CFE3FF;
}
.upgrade-reason,
.upgrade-blocked {
  color: #FD8080;
  font-weight: bold;
}
.upgrade-go {
  flex: none;
  min-width: 112px;
}

/* PARTS: the beige cards of the item inventory. */
.parts-intro {
  color: #666666;
}
.part-card {
  width: 220px;
  max-width: 100%;
  padding: 18px 16px;
  border: 1px solid #D8C8B4;
  border-radius: 20px;
  background: rgba(255, 255, 255, .25);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #394C4B;
}
.part-card .part-name {
  margin: 10px 0 0;
  font-family: "Saira Semi Condensed", sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  color: #28589F;
}
.part-card .part-have {
  margin: 0;
  font-weight: bold;
}
.part-card .part-price {
  margin: 2px 0 8px;
  font-size: 13px;
  font-weight: bold;
  color: #DC3546;
}
.part-card .part-qty {
  max-width: 110px;
}
.part-card .part-buy {
  min-width: 140px;
}
.salvage-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.salvage-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid #D8C8B4;
  border-radius: 16px;
  background: rgba(255, 255, 255, .2);
  color: #394C4B;
}
.salvage-img {
  flex: none;
  width: 52px;
  height: 52px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(0, 0, 0, .06);
  display: flex;
  align-items: center;
  justify-content: center;
}
.salvage-id {
  font-weight: normal;
  color: #929292;
}
.salvage-go {
  flex: none;
  min-width: 112px;
}

@media (max-width: 575.98px) {
  .upgrade-row,
  .salvage-row {
    flex-wrap: wrap;
  }
  .upgrade-go,
  .salvage-go {
    width: 100%;
  }
  .upgrade-info {
    flex-basis: calc(100% - 60px);
    min-width: 0;
  }
  .part-icon {
    width: 46px;
    height: 46px;
    font-size: 21px;
  }
}

/* Account history: parts and upgrades are spent CPAN (red, "-"), with the wrench of the fix button. */
.type.buy_materials, .type.upgrade_plane {
  font-family: Saira, sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 20px;
  line-height: 24px;
  color: #EA5C5C;
}
.value.buy_materials::before, .value.upgrade_plane::before {
  content: '-';
}
.transaction-icon.buy_materials .status.success, .transaction-icon.upgrade_plane .status.success {
  background-image: url(/img/transactions/minus.png);
  background-size: cover;
}
.transaction-icon img.buy_materials, .transaction-icon img.upgrade_plane {
  content: url(/img/btn-fix-pink.png);
  top: 50% !important;
  width: 40px;
  height: 40px;
}

/* ---- Temporadas com prêmio fixo (docs/TEMPORADAS.md) ----
   Tela /seasons: contagem regressiva, a sua posição e os dias que contam, a tabela de prêmios, a classificação
   (os mesmos painéis e tabelas do PvP) e o pódio da última temporada; o histórico usa o modal do PvP. */
.season-banner {
  padding: 12px 20px;
  border-radius: 20px;
  background: #2A3B55;
  color: #FFF2DE;
  box-shadow: inset 0px -4px 0px rgba(0, 0, 0, 0.15);
}

.season-countdown,
.season-pvp-button,
.season-history-button {
  white-space: nowrap;
}

.season-name {
  font-size: 22px;
  line-height: 28px;
  color: #FDBF47;
}

.season-dates {
  font-size: 13px;
  color: #C7C7C7;
}

.season-total {
  font-size: 24px;
  line-height: 30px;
  color: #A8E26E;
  white-space: nowrap;
}

.season-total img {
  vertical-align: -2px;
}

.season-panel.season-you,
.season-panel.season-prizes,
.season-panel.season-none {
  height: auto;
}

.season-rank {
  flex: none;
  width: 56px;
  font-size: 28px;
  line-height: 40px;
  color: #2A3B55;
}

.season-you-line {
  font-size: 14px;
  line-height: 20px;
}

.season-days {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.season-day {
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid #D8C8B4;
}

.season-prize-table {
  color: #394C4B;
  font-size: 14px;
}

.season-prize-table > :not(caption) > * > * {
  background: transparent;
  border-bottom: 1px dashed #D8C8B4;
  padding: 4px 6px;
  vertical-align: middle;
}

.season-points {
  font-variant-numeric: tabular-nums;
}

.season-podium {
  min-width: 140px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
}

.season-podium[data-you="true"] {
  background: rgba(253, 191, 71, 0.18);
}

.pvp-season-button img {
  vertical-align: -3px;
}

/* Account history: a season prize (a credit). */
.value.season_prize::before {
  content: '+';
}

.type.season_prize {
  font-family: Saira, sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 20px;
  line-height: 24px;
  color: #A8E26E;
}

.transaction-icon.season_prize .status.success {
  background-image: url(/img/transactions/plus.png);
  background-size: cover;
}

.transaction-icon img.season_prize {
  content: url(/img/trophy.png);
}

@media (max-width: 575.98px) {
  .season-banner {
    padding: 10px 12px;
  }

  .season-name {
    font-size: 18px;
  }

  .season-total {
    font-size: 20px;
  }

  .season-podium {
    min-width: 0;
    flex: 1 1 30%;
    padding: 6px 4px;
  }
}

/* ---- Plane fusion (docs/FUSAO.md, public/play/js/components/fusion.js) ---- */

/* Planes header: the FUSION button (purple, after PVP). */
.btn-image.purple:hover .text {
  color: #ffffff;
  text-shadow:
          -1px -1px 0 #5E2E8C,
          0   -1px 0 #5E2E8C,
          1px -1px 0 #5E2E8C,
          1px  0   0 #5E2E8C,
          1px  1px 0 #5E2E8C,
          0    1px 0 #5E2E8C,
          -1px  1px 0 #5E2E8C,
          -1px  0   0 #5E2E8C;
}

/* Rarity ribbons the original never styled: Legendary (born from a fusion, gold) and Limited (purple). */
.asset-type.Legendary {
  border-color: #E8A317 transparent transparent #E8A317;
}
.asset-type.Limited {
  border-color: #A35BD8 transparent transparent #A35BD8;
}
.asset-type-name.Legendary {
  left: -4px;
  font-size: 12px;
}
.asset-type-name.Limited {
  left: 2px;
  font-size: 14px;
}
.pvp-rarity.Legendary {
  background: #E8A317;
}

/* The "FUSED" badge next to the token id of a card (own planes and the marketplace). */
.fusion-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 8px;
  border-radius: 10px;
  background: linear-gradient(180deg, #FDBF47, #E8A317);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2);
  font-family: "Saira Semi Condensed", sans-serif;
  font-weight: bold;
  font-size: 12px;
  line-height: 20px;
  text-transform: uppercase;
  color: #5A3A00;
  vertical-align: 2px;
  cursor: default;
}

/* PLANE FUSION: the layout of the blind box screen. */
.fusion-intro {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  color: #FFF2CD;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
}
.fusion-recipe {
  padding: 2px 12px;
  border-radius: 12px;
  background: rgba(14, 33, 56, .55);
  font-family: "Saira Semi Condensed", sans-serif;
  font-weight: bold;
  font-size: 14px;
  color: #FFF2DE;
  border: 2px solid #FDBF47;
}
.fusion-recipe.Rare { border-color: #EA5C5C; }
.fusion-recipe.Legendary { border-color: #E8A317; }
.fusion-off {
  color: #FD8080;
}
.fusion-bench {
  gap: 10px;
  margin-top: 8px;
}
.fusion-sign {
  font-family: "Saira Semi Condensed", sans-serif;
  font-weight: bold;
  font-size: 44px;
  line-height: 1;
  color: #FFF2CD;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .25);
}
.fusion-slot {
  width: 210px;
  min-height: 210px;
  padding: 30px 10px 10px;
  border: 3px dashed #C9B79E;
  border-radius: 20px;
  background: rgba(232, 222, 209, .9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.fusion-slot.filled {
  border-style: solid;
  border-color: #87C847;
  background: #E8DED1;
}
.fusion-slot:disabled {
  opacity: 1;
}
.fusion-slot .asset-img {
  max-height: 130px;
}
.fusion-slot-name {
  margin-top: 4px;
  font-family: "Saira Semi Condensed", sans-serif;
  font-weight: bold;
  font-size: 14px;
  line-height: 18px;
  color: #394C4B;
  text-align: center;
}
.fusion-slot-empty {
  font-family: "Saira Semi Condensed", sans-serif;
  font-weight: bold;
  color: #9C8B73;
  text-transform: uppercase;
}
.fusion-target {
  border-style: solid;
  border-color: #6E655A;
  background: rgba(14, 33, 56, .55);
}
.fusion-target .fusion-slot-name {
  color: #FFF2DE;
}
.fusion-target .asset-type {
  mix-blend-mode: normal;
}
.fusion-target.ready {
  border-color: #FDBF47;
  animation: fusion-pulse 1.6s ease-in-out infinite;
}
.fusion-target.ready.Legendary {
  border-color: #E8A317;
}
.fusion-mystery {
  font-family: "Saira Semi Condensed", sans-serif;
  font-weight: bold;
  font-size: 84px;
  line-height: 1;
  color: #FDBF47;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, .3);
}
@keyframes fusion-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(253, 191, 71, .55); }
  50% { box-shadow: 0 0 22px 6px rgba(253, 191, 71, .55); }
}
.fusion-hint {
  color: #FFF2CD;
  font-weight: bold;
}
.fusion-preview {
  max-width: 680px;
  width: 100%;
  color: #394C4B;
}
.fusion-preview-title {
  font-family: "Saira Semi Condensed", sans-serif;
  font-weight: bold;
  font-size: 22px;
  color: #28589F;
}
.fusion-ranges .stats {
  padding-top: 2px;
  padding-bottom: 2px;
}
.fusion-warn {
  color: #D01E06;
}
.fusion-fair {
  color: #6E655A;
  overflow-wrap: anywhere;
}
.fusion-go {
  font-size: 20px;
}
.fusion-hangar-title {
  margin-bottom: 8px;
  font-family: "Saira Semi Condensed", sans-serif;
  font-weight: bold;
  font-size: 20px;
  color: #FFF2CD;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .2);
}
.fusion-pick {
  min-height: 190px;
  padding: 28px 8px 8px;
  border: 3px solid transparent;
  border-radius: 20px;
  background: #E8DED1;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.fusion-pick:not(:disabled):hover {
  border-color: #FDBF47;
}
.fusion-pick.selected {
  border-color: #87C847;
  background: #DDEFCB;
}
.fusion-pick.blocked {
  opacity: .55;
  cursor: not-allowed;
}
.fusion-pick .asset-img {
  max-height: 100px;
}
.fusion-pick-name {
  font-family: "Saira Semi Condensed", sans-serif;
  font-weight: bold;
  font-size: 14px;
  line-height: 18px;
  color: #394C4B;
  text-align: center;
}
.fusion-pick-level {
  font-size: 13px;
  font-weight: bold;
  color: #4f9f02;
}
.fusion-pick-reason {
  font-size: 12px;
  font-weight: bold;
  color: #D01E06;
}
.fusion-pick-to {
  font-size: 12px;
  font-weight: bold;
  color: #28589F;
}
.fusion-history-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 6px 12px;
  border-radius: 12px;
  background: rgba(14, 33, 56, .45);
  color: #FFF2DE;
  font-size: 14px;
}
.fusion-history-row + .fusion-history-row {
  margin-top: 6px;
}
.fusion-history-seed {
  color: #A8E26E;
  white-space: nowrap;
}

/* The result: the blind box result card with a golden glow. */
.fusion-result-text {
  color: #394C4B;
  font-weight: bold;
}
.fusion-glow {
  animation: fusion-glow 1.2s ease-out 1;
}
@keyframes fusion-glow {
  0% { box-shadow: 0 0 0 0 rgba(253, 191, 71, 0); filter: brightness(2); }
  40% { box-shadow: 0 0 40px 16px rgba(253, 191, 71, .8); }
  100% { box-shadow: 0 0 0 0 rgba(253, 191, 71, 0); filter: brightness(1); }
}
.fusion-verified {
  color: #4f9f02;
}

/* Account history: a fusion is spent CPAN (red, "-"), with the fusion icon. */
.type.fuse_plane {
  font-family: Saira, sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 20px;
  line-height: 24px;
  color: #EA5C5C;
}
.value.fuse_plane::before {
  content: '-';
}
.transaction-icon.fuse_plane .status.success {
  background-image: url(/img/transactions/minus.png);
  background-size: cover;
}
.transaction-icon img.fuse_plane {
  content: url(/img/icon_fusion.png);
  top: 50% !important;
  width: 40px;
  height: 40px;
}

@media (max-width: 575.98px) {
  .fusion-slot {
    width: 130px;
    min-height: 150px;
    padding-top: 26px;
  }
  .fusion-slot .asset-img {
    max-height: 80px;
  }
  .fusion-sign {
    font-size: 30px;
  }
  .fusion-mystery {
    font-size: 56px;
  }
  .fusion-bench .fusion-target {
    width: 100%;
    max-width: 270px;
    min-height: 120px;
  }
  .fusion-intro {
    font-size: 16px;
  }
  .fusion-result .header-blue {
    font-size: 28px;
    line-height: 40px;
  }
}

/* Privacy (docs/PRIVACIDADE.md): a small footer under every page of the game with the link to the privacy
   notice (section 8 of the player guide), in the yellow of the original links. */
.recreation-footer {
  text-align: center;
  padding: 24px 12px 32px;
  font-size: 13px;
}

/* ---- QA visual (docs/QA-VISUAL.md): consistência e celular nas telas novas ---- */

/* PvP and Seasons headers: HISTORY and RACE IN PVP (.btn-game sm: no vertical padding, 24 px text) stood
   next to SEASON (.btn-blue: 8 px 24 px, 18 px), shorter and with bigger text. The four have one size. */
.pvp-history-button,
.pvp-season-button,
.season-pvp-button,
.season-history-button {
  padding: 8px 20px;
  font-size: 18px;
  line-height: 24px;
}

/* Your season: "Prize if the season ended now" was the light green of the dark board (1.2:1 on the beige
   panel). The green of the plane card's age, darker. */
.season-you .pvp-prize {
  color: #2B6A0E;
}

/* Upgrade chips at level 0: white on light grey (2.2:1); a darker grey, still "nothing yet". */
.upgrade-chip {
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .25);
}
.upgrade-chip.zero {
  background: #8A7D6B;
}

/* Home statistics: a label that wraps ("GIAO DỊCH TRONG GAME", "TRANSACCIONES EN EL JUEGO") took the
   60 px lines of the 40 px number. Its own box and line height; one line looks the same as before. */
.stat-alert span {
  display: inline-block;
  line-height: 20px;
}

@media (max-width: 575.98px) {
  /* Phoenix vs Fishie bets: the 24 px side padding of .btn-block made "100"/"300" wider than their
     column, so the buttons overlapped and the right ones stuck out of the panel. */
  .pvf-component .row.px-2 .btn-game.btn-block {
    padding-left: 2px;
    padding-right: 2px;
  }

  /* Seasons banner: the prize wrapped under the name with its label right-aligned to the amount only. */
  .season-banner > .text-end {
    width: 100%;
    text-align: left !important;
  }

  /* Fusion bench: the "=" was left at the end of the first row and the new plane alone on the second;
     the "=" goes down with it. */
  .fusion-bench > .fusion-sign:nth-last-child(2) {
    flex-basis: 100%;
    text-align: center;
    margin: -6px 0;
  }

  /* Lottery results: the close button (inline left: 93%) stuck out past the right edge of the screen,
     half of it out of reach, and the modal scrolled sideways. */
  #lottery-histories .close-btn {
    left: auto !important;
    right: 6px;
  }

  /* Airport order book: with "COMPRAR" / "MUA" the four columns still ran ~20 px past the white card. */
  #nav-buy-sell-shares table > :not(caption) > * > * {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
  }
}

/* Rarity tags of the PvP list and of the items (white on the rarity colours, 10–13 px): the text shadow
   of the game's buttons, for the light ones (Classic 1.8:1, Common 2:1). */
.pvp-rarity,
.item-rarity {
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .3);
}

/* Game header from 992 px (where the menu stops collapsing) to 1399 px: with PvP and Seasons the eight
   links and the 60 px margins of play.css no longer fit the 960 / 1140 px container, so the balance and
   wallet boxes wrapped in two lines with the icon over the number (every language up to 1199 px; es up to
   1399 px, "Temporadas", "Aeropuertos"). The boxes keep one line; margins and paddings shrink. */
.header-bar .nav-box {
  white-space: nowrap;
}

@media (min-width: 992px) and (max-width: 1399.98px) {
  /* (the menu keeps the 60 px that clear the logo, which hangs over it: .play-logo is absolute) */
  .header-bar.navbar-expand-lg .navbar-nav:not(.me-auto) {
    margin-left: 8px;
  }
  .header-bar.navbar-expand-lg .navbar-nav .nav-link {
    padding-left: 6px;
    padding-right: 6px;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .header-bar.navbar-expand-lg .navbar-nav.me-auto {
    margin-left: 56px;
  }
  .header-bar.navbar-expand-lg .navbar-nav .nav-link {
    padding-left: 4px;
    padding-right: 4px;
    font-size: 14px;
  }
  .header-bar .nav-box {
    padding: 0 32px 0 8px;
  }
}

/* A balance from 1,000,000 (app-header.js: no decimals, the CPAN amounts follow the market scale) is two
   or three characters longer: the links lose 1 or 2 px a side so Spanish still fits at 992 and 1200 px. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .header-bar.header-big-balance.navbar-expand-lg .navbar-nav .nav-link {
    padding-left: 3px;
    padding-right: 3px;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .header-bar.header-big-balance.navbar-expand-lg .navbar-nav .nav-link {
    padding-left: 4px;
    padding-right: 4px;
  }
}

/* PvP race lanes from the 6th place: the number in the place of the medal (only 5 medal images exist). */
.pvp-lane-place {
  display: inline-block;
  flex: none;
  width: 24px;
  text-align: center;
  font-size: 16px;
  line-height: 24px;
  color: #6B5D4D;
}

/* Race result trophy (training and PvP): the original leaves 20 px between the paddings for "1st"; vi
   "Hạng 1" and th "อันดับ 1" (the word before the number) spilled over the cup and pushed the number below
   the medallion. In those languages the word goes small on top and the number under it. */
html[lang="vi"] .virtual-training .position-result,
html[lang="th"] .virtual-training .position-result {
  padding: 27px 6px 0;
  font-size: 18px;
  line-height: 18px;
}

html[lang="vi"] .virtual-training .position-result sup,
html[lang="th"] .virtual-training .position-result sup {
  display: block;
  top: 0;
  font-size: 9px;
  line-height: 11px;
}

/* Auction NEXT cards: the badges (opening date, "Opens at token launch") wrap inside the card; a Bootstrap badge never
   wraps, and at phone width (two cards a row) "Opens at: Dec 30, 2026, 9:00 PM" pushed the page sideways. */
.auction-next-badge {
  white-space: normal;
  max-width: 100%;
  line-height: 1.3;
  border-radius: 10px !important;
}

/* My data (components/my-data.js, docs/PRIVACIDADE.md): the privacy panel at the bottom of the account page,
   with the account panel's colours and buttons. */
.my-data .my-data-intro {
  margin: 20px 0;
  line-height: 1.5;
}
.my-data .my-data-status {
  line-height: 1.5;
  padding: 14px 20px;
}
.my-data .my-data-next,
.my-data .my-data-guide {
  opacity: 0.85;
}
.my-data .btn-token-bridge:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Histórico: reembolso dos bilhetes da rodada aberta quando a loteria saiu do jogo (lottery_refund) e das
   apostas dos potes abertos quando o PvF saiu (pvf_refund); créditos, decisão do time 2026-10-16. Mesmo
   desenho do bilhete/aposta e do prêmio. */
.value.lottery_refund::before,
.value.pvf_refund::before {
  content: '+';
}

.type.lottery_refund,
.type.pvf_refund {
  font-family: Saira, sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 20px;
  line-height: 24px;
  color: #A8E26E;
}

.transaction-icon.lottery_refund .status.success,
.transaction-icon.pvf_refund .status.success {
  background-image: url(/img/transactions/plus.png);
  background-size: cover;
}

.transaction-icon img.lottery_refund,
.transaction-icon img.pvf_refund {
  content: url(/img/CPAN.png);
  top: 50% !important;
  width: 35px;
  height: 35px;
}

/* Home: painel "Seu piloto" (home-pilot; decisão do time, 2026-10-16), no lugar da loteria. Só peças do
   jogo: o .content-panel (#344E76), o cartão escuro das estatísticas (#2A3B55, raio 20 px), títulos em
   Saira, o ciano (#6ECDE2) e o amarelo (#FFBC57) dos textos e os botões .btn-game (verde, amarelo, azul;
   o claro usa o bege dos cards, #E8DED1). Rótulo | valor lado a lado; no celular o valor desce. */
.pilot-panel .pilot-title {
  font-size: 26px;
  line-height: 32px;
  padding-bottom: 0;
  margin-bottom: 4px;
}

.pilot-panel .pilot-subtitle {
  color: #6ECDE2;
  font-size: 14px;
  margin-bottom: 20px;
}

.pilot-card {
  background: #2A3B55;
  border-radius: 20px;
  padding: 20px 24px;
}

.pilot-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed #6ECDE2;
}

.pilot-avatar {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
}

.pilot-card-name {
  flex: 1 1 auto;
  min-width: 0;
}

.pilot-card-title {
  font-size: 22px;
  line-height: 26px;
  color: #FFBC57;
  letter-spacing: 0.5px;
}

.pilot-card-subtitle {
  font-size: 14px;
  opacity: 0.85;
}

.pilot-address {
  margin-top: 2px;
  font-size: 13px;
  color: #6ECDE2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pilot-rows {
  margin: 0;
}

.pilot-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 16px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(110, 205, 226, 0.15);
}

.pilot-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.pilot-row dt {
  flex: 0 0 auto;
  font-weight: normal;
  font-size: 15px;
  color: rgba(255, 242, 222, 0.75);
}

.pilot-row dd {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-weight: bold;
  font-size: 16px;
  text-align: right;
  overflow-wrap: anywhere;
}

.pilot-row .cryptocurrency-icon {
  vertical-align: -4px;
}

.pilot-note {
  display: block;
  font-weight: normal;
  font-size: 12px;
  opacity: 0.7;
}

.pilot-connect {
  padding-top: 16px;
  text-align: center;
}

.pilot-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.pilot-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 8px 12px;
  border-radius: 10px;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
}

.pilot-btn:hover,
.pilot-btn:focus {
  color: #FFF2DE;
}

.pilot-btn-light {
  background: #E8DED1;
  color: #2A3B55;
  text-shadow: none;
  box-shadow: inset 0px 2px 0px rgba(255, 255, 255, 0.3), inset 0px -5px 0px rgba(0, 0, 0, 0.1);
}

.pilot-btn-light:hover,
.pilot-btn-light:focus {
  color: #2A3B55;
}

@media (max-width: 575.98px) {
  .pilot-panel.content-panel {
    padding: 20px 16px;
  }

  .pilot-card {
    padding: 16px;
  }

  .pilot-row {
    flex-direction: column;
    align-items: stretch;
  }

  .pilot-row dd {
    text-align: left;
  }

  .pilot-btn {
    font-size: 16px;
    min-height: 48px;
  }
}

/* "Buy CPAN" box of the home and the account screen (components/buy-token.js). */
.buy-token .buy-token-btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 20px;
}
.buy-token .buy-token-btn:hover { color: #FFF2DE; }
.buy-token .buy-token-mint { margin-top: 16px; opacity: 0.85; word-break: break-all; }
@media (max-width: 575px) {
  .buy-token .buy-token-btn { display: block; text-align: center; }
}

/* ---- Support inside the game (components/support.js; decisão do dono, 2026-10-19) ----
   The address box of the header opens Account / Support (no room for another link from 992 px); a red count
   on it, on its Support entry and a dot on the phone menu button say the team replied. The page uses the
   account panel (#344E76), its dark rows (#2A3B55) and the game's buttons; the player's messages are blue
   bubbles on the right, the team's are the cream of the modals on the left. Every text of the player and of
   the team keeps its line breaks and breaks long words (signatures, links) instead of widening the page. */
.account-select .nav-box {
  white-space: nowrap;
}

.account-select .dropdown-menu {
  min-width: 11rem;
}

.account-menu .dropdown-item.router-link-active {
  background: #DCD3C7;
  border-radius: 15px;
}

.nav-support-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #EA5C5C;
  box-shadow: 0 0 0 2px #5AB5D7;
  color: #FFF2DE;
  font: 700 11px/18px 'Saira Semi Condensed', sans-serif;
  text-align: center;
  text-shadow: none;
}

.nav-support-count {
  display: inline-block;
  min-width: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 9px;
  background: #EA5C5C;
  color: #FFF2DE;
  font: 700 11px/18px 'Saira Semi Condensed', sans-serif;
  vertical-align: 2px;
}

.navbar-toggler {
  position: relative;
}

.nav-toggler-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #EA5C5C;
  box-shadow: 0 0 0 2px #5AB5D7;
}

@media (max-width: 991.98px) {
  .account-select .dropdown-menu {
    position: static;
    margin: 4px 0 8px;
  }
}

.support-page .support-intro {
  margin: 20px 0 16px;
  line-height: 1.5;
}

.support-page .support-safety,
.support-form .support-form-safety {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.5;
}

.support-page .support-safety {
  padding: 14px 20px;
  color: #FDE39B;
}

.support-page .support-safety .bi,
.support-form .support-form-safety .bi {
  flex: none;
  margin-top: 2px;
}

.support-page .support-connect p {
  line-height: 1.5;
}

.support-page .support-limit,
.support-page .support-error {
  color: #FDE39B;
}

/* the list */
.support-list .support-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 30px;
  color: #FFF2DE;
  text-decoration: none;
  border-top: 1px dashed rgba(110, 205, 226, 0.45);
}

.support-list .support-item:nth-child(even) {
  background: #2F486E;
}

.support-list .support-item:last-child {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.support-list .support-item:hover,
.support-list .support-item:focus-visible {
  background: #3D5C8A;
  color: #FFF2DE;
}

.support-item-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.support-item-subject {
  font-size: 18px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.support-item-unread .support-item-subject {
  color: #FDE39B;
}

.support-item-meta {
  font-size: 13px;
  color: #B9C5D8;
}

.support-unread-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #EA5C5C;
}

.support-pill {
  display: inline-block;
  padding: 1px 10px;
  border-radius: 10px;
  font: 700 12px/20px 'Saira Semi Condensed', sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1E2A3A;
  background: #B9C5D8;
  white-space: nowrap;
}

.support-pill-open {
  background: #FDBF47;
}

.support-pill-answered {
  background: #87C847;
}

.support-pill-closed {
  background: #8798B4;
  color: #FFF2DE;
}

/* one ticket */
.support-ticket-view .support-back {
  font-size: 15px;
}

.support-ticket-view .support-subject {
  font-size: 22px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.support-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font-size: 13px;
  color: #B9C5D8;
}

.support-tx {
  font-size: 13px;
  color: #B9C5D8;
  overflow-wrap: anywhere;
}

.support-thread {
  list-style: none;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.support-msg {
  max-width: 85%;
  padding: 10px 14px 12px;
  border-radius: 14px;
}

.support-msg-player {
  align-self: flex-end;
  background: #2B79A7;
  color: #FFF2DE;
  border-bottom-right-radius: 4px;
}

.support-msg-staff {
  align-self: flex-start;
  background: #E8DED1;
  color: #3E382B;
  border-bottom-left-radius: 4px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.12);
}

.support-msg-head {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  align-items: baseline;
  margin-bottom: 4px;
  font-size: 12px;
}

.support-msg-author {
  font-family: 'Saira Semi Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.support-msg-time {
  opacity: 0.75;
}

.support-msg-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.5;
}

.support-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
}

.support-field {
  display: block;
  width: 100%;
  min-height: 6em;
  resize: vertical;
  border: 0;
  border-radius: 10px;
  padding: 12px 14px;
  background: #2A3B55;
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.25);
  color: #FFF2DE;
  font: 400 15px/1.5 Lexend, sans-serif;
}

.support-field:focus {
  outline: 2px solid #6ECDE2;
  outline-offset: 2px;
}

.support-counter {
  margin-top: 4px;
  font-size: 12px;
  text-align: right;
  opacity: 0.75;
}

.support-actions .btn-game {
  flex: 1 1 160px;
}

.support-closed-hint {
  line-height: 1.5;
  padding: 14px 20px;
}

/* the "New ticket" modal: the wells of the game's inputs (play.css input.form-control) */
.support-form .support-form-safety {
  margin-bottom: 16px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(234, 92, 92, 0.12);
  color: #8E2B2B;
}

.support-form textarea.form-control {
  min-height: 7.5em;
  resize: vertical;
  background: rgba(1, 1, 1, 0.1) !important;
  box-shadow: inset 2px 2px 0px rgba(0, 0, 0, 0.2) !important;
  border-radius: 10px !important;
  color: #3E382B;
}

.support-form .support-counter {
  color: #3E382B;
}

.support-form .support-form-tx {
  font-size: 14px;
}

.support-notice-link {
  white-space: nowrap;
}

/* the Support button of a "contact support" toast (CP.supportToast): the cream of the game on the red toast
   (vue-toasted's light blue read 2:1 there; its stylesheet is added after this one, hence the longer selector) */
.toasted-container .toasted.error .action {
  color: #FFF2DE;
  font-weight: 700;
  text-decoration: underline;
}

@media (max-width: 575.98px) {
  .support-page .mx-30 {
    margin-left: 16px;
    margin-right: 16px;
  }
  .support-page .px-30 {
    padding-left: 16px;
    padding-right: 16px;
  }
  .support-list .support-item {
    padding: 14px 16px;
  }
  .support-msg {
    max-width: 92%;
  }
}

/* The CPAN price and its change since the launch (GET /info cpanMarket): green up, red down. */
.buy-token .buy-token-price { font-weight: 600; }
.buy-token .buy-token-price.is-up { color: #8be38b; }
.buy-token .buy-token-price.is-down { color: #ff8f8f; }

/* "Buy here with SOL" in the "Buy CPAN" box (components/buy-token.js; decisão do dono, 2026-10-19/21): the dark
   card of the panel (#2A3B55), the amount field with its unit, the quote (red when the price impact is high) and
   the purchase sent, with the deposit button. On a phone the field and its button stack. */
.buy-token .buy-token-swap {
  margin: 4px 0 20px;
  padding: 20px;
  background: #2A3B55;
  border-radius: 10px;
}
.buy-token .buy-token-swap h3 { font-size: 20px; margin-bottom: 12px; }
.buy-token .buy-token-label { display: block; margin-bottom: 8px; }
.buy-token .buy-token-row { display: flex; gap: 10px; align-items: stretch; }
.buy-token .buy-token-field { position: relative; flex: 1 1 auto; min-width: 0; }
/* the game's input well (play.css input.form-control) is made for the cream modals: lighter text on this card */
.buy-token .buy-token-field input.form-control {
  height: 100%;
  min-height: 44px;
  padding-right: 56px;
  font-size: 20px;
  background: rgba(0, 0, 0, 0.25) !important;
  border-color: rgba(110, 205, 226, 0.45);
  color: #FFF2DE;
}
.buy-token .buy-token-field input.form-control::placeholder { color: rgba(255, 242, 222, 0.4); }
.buy-token .buy-token-field input.form-control:focus { border-color: #6ECDE2; box-shadow: 0 0 0 3px rgba(110, 205, 226, 0.3) !important; }
.buy-token .buy-token-field input.form-control:disabled { opacity: 0.6; }
.buy-token .buy-token-unit {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  color: #B8C3DC;
  font-weight: 600;
  pointer-events: none;
}
.buy-token .buy-token-quote-btn { flex: 0 0 auto; padding: 8px 20px; white-space: nowrap; }
.buy-token .buy-token-hint { margin-top: 8px; color: #B8C3DC; }
.buy-token .buy-token-error { margin-top: 8px; color: #FF8F8F; font-weight: bold; }
.buy-token .buy-token-quote { margin-top: 16px; padding-top: 16px; border-top: 1px dashed #6ECDE2; }
.buy-token .buy-token-quote p { margin-bottom: 6px; }
.buy-token .buy-token-out { font-size: 20px; }
.buy-token .buy-token-out b { color: #FDBF47; }
.buy-token .buy-token-impact.is-high { color: #FF8F8F; font-weight: bold; }
.buy-token .buy-token-route, .buy-token .buy-token-expiry { color: #B8C3DC; }
.buy-token .buy-token-quote.is-expired .buy-token-out,
.buy-token .buy-token-quote.is-expired .buy-token-impact,
.buy-token .buy-token-quote.is-expired .buy-token-route { opacity: 0.55; }
.buy-token .buy-token-quote.is-expired .buy-token-expiry { color: #FDBF47; font-weight: 600; }
.buy-token .buy-token-buy { display: block; width: 100%; margin-top: 12px; padding: 10px 24px; border-radius: 10px; }
.buy-token .buy-token-notice { margin-top: 10px; color: #FDBF47; }
.buy-token .buy-token-sent-title { font-size: 22px; color: #8BE38B; margin-bottom: 6px; }
.buy-token .buy-token-sig a { word-break: break-all; }
.buy-token .buy-token-sent-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.buy-token .buy-token-sent-actions .btn-game { padding: 8px 24px; }
.buy-token .buy-token-safety { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(255, 242, 222, 0.15); opacity: 0.85; }
@media (max-width: 575px) {
  .buy-token .buy-token-swap { padding: 16px; }
  .buy-token .buy-token-row { flex-direction: column; }
  .buy-token .buy-token-quote-btn { padding: 10px 20px; }
  .buy-token .buy-token-sent-actions { flex-direction: column; }
  .buy-token .buy-token-sent-actions .btn-game { width: 100%; }
}

/* A visitor: connect the wallet to buy with SOL here (the landing's Buy Token button lands on this box). */
.buy-token .buy-token-connect { margin: 4px 0 18px; }
.buy-token .buy-token-connect-btn { padding: 10px 24px; border-radius: 10px; font-size: 18px; }
@media (max-width: 575px) { .buy-token .buy-token-connect-btn { display: block; width: 100%; } }