/* Investment popup.
   The dashboard rules below started as the inline <style> block of the old
   views/userpanel/investment.html page. Everything else the dashboard needs
   (.investment-dashboard, .investment-stats-section, .action-card, .game-stat,
   .players-table, ...) already lives in /styles.css and
   /css/game-details-modal.css, both of which /play loads. The spacing and
   table rules below are modal-specific changes to that original block. */
/* Dashboard stack spacing. The old page had a 32px rhythm; inside the modal
   the cards read better a little tighter. */
.investment-dashboard {
  gap: 20px;
}
.investment-header-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  position: relative;
}
.investment-two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
/* Profit colour comes from the shared game-stat classes (as in the game and
   bet popups) instead of an inline style; keep the modal's own red. */
.investment-dashboard .game-stat-neg {
  color: #ff6b6b;
}
/* Loading state. The three dashboard cards keep their normal background and
   padding, and each gets the left-to-right glance the other popups use while
   /investment.json is in flight (shimmer and keyframes live in
   /css/user-profile-modal.css, which /play also loads). */
.investment-dashboard.is-loading .investment-stats-section::after,
.investment-dashboard.is-loading .investment-actions-section::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0) 100%);
  animation: modal-glance 1.4s ease-in-out infinite;
  filter: blur(2px);
  pointer-events: none;
  border-radius: inherit;
}
/* Hold the action card at its real height so the modal does not grow when the
   form replaces the placeholder. */
.investment-dashboard.is-loading .investment-actions-section .action-card {
  min-height: 400px;
}
/* Rounds table.
   /css/game-details-modal.css gives every .players-table a 560px min-width
   because the game details ledger has five columns, and /styles.css hides
   column 4 below 640px (that is "Bet ID" there, but "Your P&L" here). Both
   would make this table scroll sideways or lose the investor's own P&L, so
   undo them for this four-column table: it must fit its card instead. */
.investment-dashboard .players-table-scroll {
  overflow-x: visible;
}
.investment-dashboard #rounds-table-wrap .players-table {
  min-width: 0;
  width: 100%;
}
.investment-dashboard .players-table th,
.investment-dashboard .players-table td {
  padding: 12px 10px;
}
.investment-dashboard .players-table td {
  white-space: nowrap;
}
.investment-dashboard .players-table th:nth-child(4),
.investment-dashboard .players-table td:nth-child(4) {
  display: table-cell;
}
.investment-toggle {
  display: flex;
  width: fit-content;
  gap: 6px;
  padding: 4px;
  margin: 0 auto 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
}
.investment-toggle-btn {
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 22px;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}
.investment-toggle-btn:hover { color: #fff; }
.investment-toggle-btn.active[data-target="invest"] {
  border: 1px solid rgba(0, 255, 204, 0.4);
  color: #ffffff;
  background: rgba(0, 255, 204, 0.1);
  box-shadow: 0 12px 32px rgb(0 255 204 / 0%), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  animation: investment-toggle-pulse 0.3s ease;
}
.investment-toggle-btn.active[data-target="divest"] {
  background: linear-gradient(183deg, #f443364d, rgb(244 67 54 / 32%));
  border: 1px solid #F44336;
  color: #fff;
  box-shadow: 0 12px 32px rgb(0 255 204 / 0%), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  animation: investment-toggle-pulse 0.3s ease;
}
@keyframes investment-toggle-pulse {
  0% {
    transform: scale(0.98);
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}
.investment-form .form-input { width: 100%; }
.investment-form input[type="password"] {
  background: linear-gradient(145deg, #232323, #1f1f1f);
}
.investment-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: linear-gradient(145deg, #232323, #1f1f1f);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: all 0.3s;
}
.investment-input-wrap:focus-within {
  border-color: #00ffcc;
  box-shadow: 0 0 0 2px rgba(0, 255, 204, 0.2),
    inset 0 2px 4px rgba(0, 0, 0, 0.3);
}
.investment-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: #fff;
  font-size: 16px;
  padding: 16px 8px 16px 20px;
  font-family: inherit;
}
.investment-input::placeholder { color: rgba(255, 255, 255, 0.5); }
.investment-input-suffix {
  padding: 0 4px 0 2px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.amount-quick-btn {
  margin: 6px 0 6px 6px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: #c5c5c5;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  border-radius: 9px;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: 0.2s;
  flex-shrink: 0;
}
.amount-quick-btn:last-of-type { margin-right: 6px; }
.amount-quick-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.32);
  color: #fff;
}
.investment-dashboard .action-btn.primary {
  box-shadow: 0 12px 32px rgb(0 255 204 / 0%),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.investment-dashboard .action-btn.primary:hover {
  box-shadow: 0 12px 32px rgba(0, 255, 204, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
@media (max-width: 1200px) {
  /* Side by side, each card gets about half the modal. Below this width the
     rounds table no longer has room for six-figure P&L columns, so stack. */
  .investment-two-column { grid-template-columns: 1fr; gap: 20px; }
  /* The stats wrap into rows below the five-across layout, so drop the
     vertical dividers, which only make sense in a single row. */
  .investment-header-stats .game-stat { padding: 0 8px; }
  .investment-header-stats .game-stat::before { display: none; }
}
@media (min-width: 769px) and (max-width: 1200px) {
  .investment-header-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 18px;
  }
}
@media (max-width: 768px) {
  .investment-header-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 18px;
  }
}
@media (max-width: 640px) {
  .investment-modal .user-profile-modal-body {
    padding: 12px 12px 20px;
  }
  /* Grid and flex items default to min-width:auto, so one wide child (the
     amount row, the stats) can make a column grow past its card. Pin the
     whole chain to the card width instead. */
  .investment-dashboard,
  .investment-two-column,
  .investment-actions-section,
  .investment-stats-section,
  .investment-dashboard .actions-grid {
    width: 100%;
    min-width: 0;
  }
  .investment-actions-section,
  .investment-stats-section { padding: 16px 12px; }

  /* Stats stay two per row on phones (minmax(0,1fr) so an unbreakable
     number cannot widen its track). The value is 16px, stepping down only on
     the narrowest phones, where two columns are physically narrower than a
     17-character total such as 29,203,437,042.03 (10.2em wide). */
  .investment-header-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .investment-dashboard .game-stat-value {
    font-size: clamp(12px, calc(4.8vw - 2.3px), 16px);
  }
  /* Centre ONLY the fifth stat (Investment profit): it spans the row, so its
     label and value sit in the middle of the card. The other four keep their
     normal 2x2 cells and are not turned into a single centred column. */
  .investment-header-stats .game-stat:last-child {
    grid-column: 1 / -1;
    justify-self: center;
  }
  /* The desktop layout draws a hairline between adjacent stats. On phones the
     five stats wrap into rows, so the ≤1200px rule above hides every divider;
     restore it only on the second column of each row. That gives exactly two
     lines: Total invested | Total divested and Active investment | Bankroll
     stake. The left column and the centred fifth stat keep none. */
  .investment-header-stats .game-stat:nth-child(even)::before {
    display: block;
  }

  /* Action forms: the card fills the section. Min/Max stay inside the input
     row on its right edge, exactly as on desktop, so the neutral quick-set
     buttons read as part of the amount field instead of a second row. The
     input keeps the remaining width and shrinks first; the "sats" suffix
     stays hidden on phones because the field label already says
     "Amount (sats)". */
  .investment-dashboard .actions-grid { justify-items: stretch; gap: 16px; }
  .investment-dashboard .action-card {
    width: 100%;
    max-width: 100%;
    padding: 16px 12px;
  }
  .investment-toggle { width: 100%; margin-bottom: 16px; }
  .investment-toggle-btn { flex: 1; padding: 8px 10px; }
  .investment-input {
    flex: 1 1 auto;
    padding: 14px 4px 14px 12px;
  }
  .investment-input-suffix { display: none; }
  .amount-quick-btn {
    flex: 0 0 auto;
    margin: 0 0 0 4px;
    padding: 8px 10px;
  }
  .amount-quick-btn:last-of-type { margin-right: 4px; }
  .investment-dashboard .action-btn { width: 100%; padding: 14px 16px; }

  /* The Crash multiplier is context, not money. Dropping it on phones leaves
     room for both amount columns plus the game link without scrolling. */
  .investment-dashboard .players-table th:nth-child(2),
  .investment-dashboard .players-table td:nth-child(2) {
    display: none;
  }
  .investment-dashboard .players-table th,
  .investment-dashboard .players-table td {
    padding: 10px 8px;
    font-size: 12px;
  }
  .investment-dashboard .players-table th {
    font-size: 10px;
    letter-spacing: 0.02em;
  }
}
@media (max-width: 480px) {
  /* /styles.css raises .section-title to 1.2rem on phones; keep the card
     headings from outgrowing the card. */
  .investment-dashboard .section-title { font-size: 1rem; margin-bottom: 14px; }
}
@media (max-width: 380px) {
  /* Tighten the table cells further on the smallest phones. */
  .investment-dashboard .players-table th,
  .investment-dashboard .players-table td {
    padding: 8px 5px;
    font-size: 11px;
  }
}

/* Modal shell. Mirrors .security-modal-overlay / .security-modal: the overlay
   scrolls and the box grows with its content, so the scrollbar sits on the page
   edge (same as /security/update-2fa and /game/:id). */
.investment-modal-overlay {
  align-items: flex-start;
  overflow-y: auto;
  padding: 20px;
  box-sizing: border-box;
}
.investment-modal,
.investment-modal .user-profile-modal-body {
  box-sizing: border-box;
}
.investment-modal .user-profile-modal-body {
  max-width: 100%;
}
.investment-modal-overlay .investment-modal {
  width: 90%;
  max-width: 1100px;
  max-height: none;
  overflow: visible;
  margin: auto;
}
/* The old standalone page rendered inside .modern-user-container, whose
   background is #1a1a1a. Keep that exact backdrop so the translucent cards
   blend the same way they do on /investment today. */
.investment-modal {
  background: #1a1a1a;
}
@media (max-width: 640px) {
  .investment-modal-overlay {
    padding: 0;
    padding-top: 44px;
  }
  .investment-modal-overlay .investment-modal {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 16px;
  }
}