/* Angular card language for the existing member pages.
   Named layer keeps these important geometry rules ahead of legacy !important
   declarations without changing the source stylesheets. */
@layer rockstar-cards {
  :root {
    --rs-yellow: #fcaf17;
    --rs-ivory: #f3efe7;
    --rs-muted: #b9b3a8;
    --rs-edge: rgba(243, 239, 231, .18);
  }

  /* Hero/campaign panels: sharp-edged editorial slabs; retain their photos,
     overlays and inner links without clipping focus or overflow content. */
  .santa,
  .brands,
  .promo,
  .campaign-popup {
    position: relative;
    border: 1px solid var(--rs-edge) !important;
    border-radius: 0 !important;
    box-shadow: inset 3px 0 0 var(--rs-yellow), 0 15px 32px rgba(0, 0, 0, .3) !important;
  }

  .santa::after,
  .brands::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    width: 19px;
    height: 19px;
    pointer-events: none;
    background: linear-gradient(135deg, transparent 47%, var(--rs-yellow) 48% 53%, transparent 54%);
  }

  /* Product cards keep every action outside clipping. The image itself is
     the safe leaf: its top-right corner has a crisp publisher-style cut. */
  .products .product {
    min-width: 0;
    padding: 9px !important;
    gap: clamp(10px, 2vw, 16px) !important;
    border: 1px solid var(--rs-edge) !important;
    border-left: 3px solid var(--rs-yellow) !important;
    border-radius: 0 !important;
    background-color: #191919 !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .26) !important;
  }

  .product-image {
    min-width: 0;
    overflow: visible !important;
    border-radius: 0 !important;
  }

  .product-image img {
    display: block;
    width: 100%;
    height: 100%;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  }

  .product .badge {
    top: 7px !important;
    left: 7px !important;
    max-width: calc(100% - 24px);
    border-radius: 0 !important;
    border-color: rgba(252, 175, 23, .72) !important;
    background: rgba(17, 17, 17, .94) !important;
    color: var(--rs-ivory) !important;
    line-height: 1.2;
  }

  .product-body { min-width: 0; padding: 3px 2px 2px 0 !important; }
  .product-body h2 { line-height: 1.05; }
  .product .details { row-gap: 4px !important; }

  /* Financial tiles: substantial cut corners, generous content-safe inset.
     Focus rings sit inside the clipped silhouette, not beyond it. */
  .balances .bal,
  .balances .balance,
  .summary {
    min-width: 0;
    border: 1px solid rgba(243, 239, 231, .25) !important;
    background-color: #191919 !important;
    color: var(--rs-ivory) !important;
    border-radius: 0 !important;
    clip-path: polygon(0 12px, 12px 0, calc(100% - 17px) 0, 100% 17px,
      100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
    box-shadow: inset 0 0 0 1px rgba(252, 175, 23, .17), inset 3px 0 0 var(--rs-yellow) !important;
  }

  .balances .bal { padding: 15px clamp(13px, 3vw, 19px) !important; }
  .balances .balance { padding: 16px !important; }
  .balances .bal strong,
  .balances .balance strong,
  .summary strong {
    max-width: 100%;
    color: var(--rs-ivory) !important;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }

  .balances .round,
  .balances .balance-icon,
  .summary-icon {
    border-radius: 0 !important;
    border: 1px solid rgba(252, 175, 23, .55) !important;
  }

  .balances .bal:focus-visible,
  .balances .balance:focus-visible,
  .summary:focus-visible {
    outline: 3px solid var(--rs-yellow) !important;
    outline-offset: -6px !important;
    box-shadow: inset 0 0 0 3px var(--rs-yellow) !important;
  }

  /* Rows stay square and quiet; the diagonal terminal accent supplies rhythm
     without clipping menus, text, or keyboard focus. */
  .menu-item,
  .transaction,
  .record,
  .history-item {
    position: relative;
    min-width: 0;
    border: 1px solid rgba(243, 239, 231, .14) !important;
    border-left: 3px solid var(--rs-yellow) !important;
    border-radius: 0 !important;
    padding: 10px 18px 10px 14px !important;
    background-color: #191919 !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .035) !important;
  }

  .menu-item::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 13px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(135deg, transparent 43%, rgba(252, 175, 23, .9) 44% 49%, transparent 50%);
  }

  .menu-icon {
    border: 1px solid rgba(252, 175, 23, .34);
    border-radius: 0 !important;
  }

  /* Team overview: contrast-sized stats, then denser tier rows. */
  .invite,
  .bonus,
  .group {
    position: relative;
    border: 1px solid var(--rs-edge) !important;
    border-left: 3px solid var(--rs-yellow) !important;
    border-radius: 0 !important;
    box-shadow: 0 12px 27px rgba(0, 0, 0, .24) !important;
  }

  .invite,
  .bonus { padding: clamp(14px, 3vw, 21px) !important; }

  .stats .stat {
    min-width: 0;
    padding: 14px !important;
    border: 1px solid var(--rs-edge) !important;
    border-radius: 0 !important;
    clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px,
      100% 100%, 0 100%);
    box-shadow: inset 3px 0 0 var(--rs-yellow), 0 8px 18px rgba(0, 0, 0, .2) !important;
  }

  .stats .stat:focus-visible {
    outline: 3px solid var(--rs-yellow) !important;
    outline-offset: -6px !important;
    box-shadow: inset 0 0 0 3px var(--rs-yellow) !important;
  }

  .levels .level {
    min-width: 0;
    padding: 10px 13px !important;
    border: 1px solid var(--rs-edge) !important;
    border-radius: 0 !important;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px,
      100% 100%, 0 100%);
    box-shadow: inset 3px 0 0 rgba(252, 175, 23, .82) !important;
  }

  .medal-side { padding-right: 8px; }
  .level-name { border-radius: 0 !important; }

  /* Forms and account management stay un-clipped: dialogs, selectors,
     dropdowns and focus outlines can safely extend beyond their card. */
  .intro,
  .empty,
  .account,
  .form-card,
  .login-card,
  body:has(#registration-form) .card {
    border: 1px solid var(--rs-edge) !important;
    border-radius: 0 !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 14px 30px rgba(0, 0, 0, .27) !important;
  }

  .intro,
  .form-card,
  .login-card,
  body:has(#registration-form) .card {
    padding: clamp(20px, 4vw, 34px) !important;
    border-top: 2px solid var(--rs-yellow) !important;
  }

  .account {
    min-width: 0;
    border-left: 3px solid var(--rs-yellow) !important;
    padding: 14px !important;
  }

  .empty {
    margin-top: 14px;
    padding: clamp(22px, 5vw, 38px) !important;
  }

  .field-row,
  .field,
  .field input,
  .field select,
  .field textarea,
  .input,
  .select-trigger { min-width: 0; border-radius: 0 !important; }

  .security {
    border: 1px solid rgba(243, 239, 231, .14) !important;
    border-left: 2px solid var(--rs-yellow) !important;
    border-radius: 0 !important;
  }

  .campaign-brand::before {
    content: "ROCKSTAR / LES UNIVERS" !important;
    color: var(--rs-yellow) !important;
  }

  @media (hover: hover) and (pointer: fine) {
    .products .product,
    .menu-item,
    .stats .stat,
    .levels .level,
    .account,
    .balances .bal,
    .balances .balance {
      transition: transform .18s ease, border-color .18s ease;
    }

    .products .product:hover,
    .menu-item:hover,
    .stats .stat:hover,
    .account:hover,
    .balances a.bal:hover,
    .balances a.balance:hover {
      transform: translateY(-2px);
      border-color: rgba(252, 175, 23, .68) !important;
    }
  }

  @media (max-width: 430px) {
    .products .product { padding: 8px !important; }
    .balances .bal { padding-inline: 12px !important; }
    .invite { padding: 12px !important; }
    .stats .stat { grid-template-columns: 38px minmax(0, 1fr) 14px; }
    .levels .level { padding-inline: 9px !important; }
    .account { grid-template-columns: 42px minmax(0, 1fr) auto; gap: 9px !important; }
  }

  @media (max-width: 360px) {
    .intro,
    .form-card,
    .login-card,
    body:has(#registration-form) .card { padding: 18px 14px !important; }
    .balances .bal strong,
    .balances .balance strong { font-size: clamp(16px, 5vw, 20px) !important; }
    .menu-item { padding-inline: 10px 16px !important; }
  }

  @media (prefers-reduced-motion: reduce) {
    .products .product,
    .menu-item,
    .stats .stat,
    .levels .level,
    .account,
    .balances .bal,
    .balances .balance { transition: none !important; }
  }
}