/* Beta cosmetics preview/equipment surface. Signed-in selections are
   account-backed; signed-out previews fall back to browser storage. */
html[data-brasta-card-back] .player-card-back,
html[data-brasta-card-back] .table-deck-card,
html[data-brasta-card-back] .deal-flight-card,
html[data-brasta-card-back] .card-back-placeholder {
  background-image: var(--brasta-card-back-art) !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
html[data-brasta-card-back] .player-card-back::before,
html[data-brasta-card-back] .player-card-back span,
html[data-brasta-card-back] .table-deck-card::before,
html[data-brasta-card-back] .table-deck-card > span,
html[data-brasta-card-back] .deal-flight-card::before,
html[data-brasta-card-back] .deal-flight-card > span { display:none !important; }
html[data-brasta-table-felt] .table {
  /* Treat the artwork as a responsive nine-slice: the rail stays on the
     perimeter while the center stretches with the game table. */
  background-image: none !important;
  background-color: #081f22 !important;
  border-color: transparent !important;
  border-style: solid !important;
  border-width: clamp(6px, 1.2vw, 10px) !important;
  border-image-source: var(--brasta-table-felt-art) !important;
  border-image-slice: 24 fill !important;
  border-image-width: clamp(6px, 1.2vw, 10px) !important;
  border-image-outset: 0 !important;
  border-image-repeat: stretch !important;
  box-shadow: 0 18px 45px #0007 !important;
}
html[data-brasta-table-felt] .table::before { display: none !important; }

/* Only the portrait is circularly clipped. The frame has its own full square
   canvas, including its projecting orbit lines and crest. */
.brasta-avatar-shell { position:relative; display:inline-grid; flex:none; width:30px; height:30px; }
.account-profile-head .brasta-avatar-shell { width:60px; height:60px; }
.brasta-avatar-shell > .brasta-avatar-portrait { width:100%; height:100%; border-radius:50%; object-fit:cover; }
html[data-brasta-avatar-frame] :is(
  .player-chip.player-card[data-you="1"] .player-card-avatar,
  .account-dock[data-brasta-username]:not([data-brasta-username=""]) .brasta-avatar-shell,
  .account-profile-head .brasta-avatar-shell,
  .player-profile-head[data-beta-cosmetic-self] .player-profile-avatar
) {
  position:relative;
  isolation:isolate;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
html[data-brasta-avatar-frame] :is(
  .player-chip.player-card[data-you="1"] .player-card-avatar,
  .account-dock[data-brasta-username]:not([data-brasta-username=""]) .brasta-avatar-shell,
  .account-profile-head .brasta-avatar-shell,
  .player-profile-head[data-beta-cosmetic-self] .player-profile-avatar
) > .brasta-avatar-portrait {
  position:absolute;
  inset:17%;
  width:66%;
  height:66%;
  border-radius:50%;
  clip-path:circle(50%);
  object-fit:cover;
}
html[data-brasta-avatar-frame] :is(
  .player-chip.player-card[data-you="1"] .player-card-avatar,
  .account-dock[data-brasta-username]:not([data-brasta-username=""]) .brasta-avatar-shell,
  .account-profile-head .brasta-avatar-shell,
  .player-profile-head[data-beta-cosmetic-self] .player-profile-avatar
)::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:var(--brasta-avatar-frame-art) center / contain no-repeat;
}
html[data-brasta-avatar-frame] .player-chip.player-card[data-you="1"] .player-card-avatar {
  width:42px; height:42px; flex-basis:42px; margin-top:0;
}
.player-card-avatar.has-image > .player-card-avatar-fallback { visibility:hidden; }
html[data-brasta-avatar-frame] .account-profile-head .brasta-avatar-shell { width:82px; height:82px; }
@media(max-width:700px) {
  .account-dock .brasta-avatar-shell { width:28px; height:28px; }
  html[data-brasta-avatar-frame] .player-chip.player-card[data-you="1"] .player-card-avatar { width:38px; height:38px; flex-basis:38px; }
}
@media(max-width:600px) {
  html[data-brasta-avatar-frame] .players-2v2 .player-chip.player-card[data-you="1"] .player-card-avatar {
    display:grid!important; width:30px; height:30px; flex-basis:30px;
  }
}

.beta-cosmetic-title { display:inline-flex; align-items:center; gap:6px; max-width:100%; color:#e5ce91; font-size:12px; font-weight:800; line-height:1.2; }
.beta-cosmetic-title-copy { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.beta-cosmetic-badge-art { display:block; width:26px; height:26px; object-fit:contain; }
.player-chip.player-card .beta-cosmetic-title { display:flex; margin-top:3px; font-size:10px; }
.player-card-profile-badge > .beta-cosmetic-badge-art { width:100%; height:100%; }
.account-profile-head .beta-cosmetic-badge-art { width:26px; height:26px; border-radius:0; background:none; }
/* A cosmetic title or an explicit None occupies the same slot as an earned title. */
html:is([data-brasta-title-source="season"],[data-brasta-title-source="none"]) .player-chip.player-card[data-you="1"] [data-player-card-profile-badge],
html:is([data-brasta-title-source="season"],[data-brasta-title-source="none"]) [data-beta-cosmetic-self] [data-profile-equipped-badge] { display:none!important; }

.account-portrait-controls { display:grid; justify-items:center; gap:6px; flex:none; }
[data-cosmetics-frame-open] { border:1px solid #d8b75e55; border-radius:9px; background:#d8b75e12; color:#ead994; padding:8px; font:700 10px/1.2 system-ui,sans-serif; cursor:pointer; }
.player-profile-head [data-cosmetics-frame-open] { margin-left:auto; max-width:76px; }
.ppg-tabs[data-cosmetics-tabs="true"] { grid-template-columns:repeat(3,minmax(0,1fr)); }
.ppg-tabs[data-cosmetics-guest-tabs] { grid-template-columns:repeat(3,minmax(0,1fr)); }
.ppg-tabs[data-cosmetics-tabs="true"] button,
.ppg-tabs[data-cosmetics-guest-tabs] button { display:flex; align-items:center; justify-content:center; min-height:40px; padding:10px 6px; font:700 11px/1.3 system-ui,sans-serif; letter-spacing:normal; white-space:nowrap; }
.cosmetic-table-panel[hidden] { display:none!important; }
.cosmetic-beta-note { margin:0 0 16px; color:#afc1b6; font:400 12px/1.55 system-ui,sans-serif; }
.cosmetic-table-panel section + section { margin-top:24px; padding-top:20px; border-top:1px solid #ffffff16; }
.cosmetic-table-panel h3 { margin:0; color:#f4e2ad; font:700 19px/1.3 Georgia,serif; }
.cosmetic-table-panel section > p { margin:4px 0 12px; color:#97ada0; font-size:12px; }
.cosmetic-choice-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.cosmetic-choice { display:flex; flex-direction:column; align-items:center; min-width:0; gap:5px; padding:12px 8px 10px; border:1px solid #ffffff20; border-radius:12px; background:#0003; color:#f6eed9; font-family:system-ui,sans-serif; text-align:center; cursor:pointer; }
.cosmetic-choice:hover { background:#d8b75e10; border-color:#d8b75e77; }
.cosmetic-choice:disabled { cursor:not-allowed; opacity:.58; }
.cosmetic-choice:disabled:hover { background:#0003; border-color:#ffffff20; }
.cosmetic-choice[aria-pressed="true"] { border-color:#e5c361; background:#d8b75e15; box-shadow:inset 0 0 0 1px #d8b75e55; }
.cosmetic-choice:focus-visible,[data-cosmetics-frame-open]:focus-visible,.cosmetic-frame-dialog button:focus-visible { outline:2px solid #fff1b8; outline-offset:3px; }
.cosmetic-choice-preview { width:100%; height:94px; display:grid; place-items:center; margin-bottom:4px; }
.cosmetic-choice-art { display:block; max-width:100%; max-height:100%; object-fit:contain; }
.cardBack .cosmetic-choice-art { height:90px; width:64px; }
.tableFelt .cosmetic-choice-art { width:100%; height:84px; }
.cosmetic-choice strong { font-size:12px; line-height:1.3; }
.cosmetic-choice small { color:#a6b8ac; font-size:10px; line-height:1.3; }
.cosmetic-access { margin-top:auto; padding-top:4px; color:#abd6bb; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; }
.cosmetic-access.premium { color:#e7cd85; }
.cosmetic-choice-state { min-width:58px; border-radius:6px; padding:4px 7px; background:#ffffff0d; color:#bbcabf; font-size:10px; font-weight:700; }
.cosmetic-choice[aria-pressed="true"] .cosmetic-choice-state { background:#e5c361; color:#102219; }
.cosmetic-classic-art { position:relative; width:62px; height:88px; display:grid; place-items:center; border:2px solid #d9b855; border-radius:7px; background:linear-gradient(135deg,#d4af3713 25%,transparent 25%) 0 0/7px 7px,linear-gradient(315deg,#d4af370b 25%,transparent 25%) 0 0/7px 7px,linear-gradient(180deg,#0c2a20,#071b15); color:#d4af37; font:900 26px Georgia,"Times New Roman",serif; text-shadow:0 1px 2px #000; box-shadow:0 3px 7px #0008,inset 0 0 0 1px #0006; }
.cardBack .cosmetic-classic-art::before { content:""; position:absolute; inset:5px; border:1px solid #d4af3750; border-radius:3px; }
.tableFelt .cosmetic-classic-art { width:90%; height:68px; border-width:5px; border-color:#332619; border-radius:12px; background:linear-gradient(135deg,#0d5438,#0a402d); box-shadow:inset 0 0 16px #0005; }
.cosmetic-frame-preview { position:relative; display:block; width:94px; height:94px; }
.cosmetic-preview-portrait { position:absolute; inset:12%; display:grid; place-items:center; border-radius:50%; overflow:hidden; background:#174331; color:#ead08c; font:700 24px Georgia,serif; }
.has-frame .cosmetic-preview-portrait { inset:17%; }
.cosmetic-preview-portrait img { width:100%; height:100%; object-fit:cover; }
.cosmetic-frame-preview > .cosmetic-choice-art { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.cosmetic-status { min-height:18px; margin:12px 0 0; color:#e4d198; font:400 12px/1.4 system-ui,sans-serif; }
.cosmetic-frame-dialog { box-sizing:border-box; width:min(620px,calc(100vw - 28px)); max-height:calc(100dvh - 40px); margin:auto; padding:22px; overflow:auto; border:1px solid #d8b75e66; border-radius:20px; background:linear-gradient(145deg,#123628,#071a12); color:#f6eed9; box-shadow:0 24px 80px #000a; }
.cosmetic-frame-dialog::backdrop { background:#020d0bd9; }
.cosmetic-section-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; }
.cosmetic-section-heading h2 { margin:0; font:700 25px Georgia,serif; }
.cosmetic-section-heading button { width:36px; height:36px; border:1px solid #ffffff22; border-radius:50%; background:#ffffff0b; color:#f6eed9; font-size:24px; cursor:pointer; }
.cosmetic-done { display:block; min-height:40px; margin:12px 0 0 auto; padding:8px 22px; border:1px solid #e5c361; border-radius:9px; background:#e5c361; color:#102219; font:800 12px system-ui,sans-serif; cursor:pointer; }
.profile-badge-emblem.has-cosmetic-art { border:0; border-radius:0; background:none; box-shadow:none; }
.profile-badge-emblem.has-cosmetic-art img { display:block; width:100%; height:100%; object-fit:contain; }
.profile-badges-panel .cosmetic-beta-note { margin:12px 0; }
@media(max-width:600px) {
  .cosmetic-choice-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .cosmetic-frame-dialog { padding:17px; }
  .cosmetic-choice strong { font-size:11px; }
}