/* ============================================================================
   Profile dashboard (the owner's pick "C", 2026-10-09): the home shelf's
   look on the profile page. The full-bleed avatar hero stays; under it a grid
   of tiles (win rate, games, wins, points + Watch, coins + Top up, best rank in
   its game's colours), then the settings as a native-style list. The career
   details, coin packages, account info, availability and promo code open in
   bottom sheets (.pd-sheet) from their row instead of filling the page.

   Load after the page's inline <style> and after /css/home-shelf.css (that
   sheet gives the Baloo Bhaijaan 2 font and each game's palette, .gt-<id>
   with the --gt-* tokens). Scope: #profile-view.pd and .pd-sheet only.
   iOS: the server strips the purchase / promo / gift / push blocks for every
   iPhone/iPad request (server.js stripConditionalSection), so every part of
   them (the Top up button, the coins sheet, the rows) sits inside the same
   <!--CSTART:x--> markers; the CSS gates in the page stay as a second layer.
   ========================================================================== */
.pd, .pd-sheet { font-family: var(--gt-font); }
.pd :focus-visible, .pd-sheet :focus-visible { outline: 3px solid #F5C518; outline-offset: 2px; }
.pd-outline { --o: #000; text-shadow: 0 2px 0 var(--o), 0 -2px 0 var(--o), 2px 0 0 var(--o), -2px 0 0 var(--o), 1.5px 1.5px 0 var(--o), -1.5px 1.5px 0 var(--o), 1.5px -1.5px 0 var(--o), -1.5px -1.5px 0 var(--o), 0 4px 0 rgba(0, 0, 0, .35); }

/* ── Hero: today's full-bleed avatar, rounded and chunky; name at the bottom ── */
.pd .hero-stage { aspect-ratio: 4 / 4.3; margin: 0 0 18px; border-radius: 28px; box-shadow: 0 6px 0 #050506, 0 16px 30px rgba(0, 0, 0, .5); }
.pd .hero-stage--monogram { aspect-ratio: auto; min-height: 268px; }
.pd .hero-stage.avatar-frame { border-radius: 28px; }
.pd .hero-stage.avatar-frame::before, .pd .hero-stage.avatar-frame::after { border-radius: inherit; }
.pd .hero-lang { height: 36px; padding: 0 12px; top: 58px; border: 0; background: rgba(10, 10, 14, .7); font: 800 .85rem/1 var(--gt-font); }
.pd-hero-foot { position: absolute; z-index: 3; inset: auto 14px 14px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; line-height: normal; }
.pd-hero-id { min-width: 0; }
.pd #profile-name { margin: 0; font-size: 2.1rem; font-weight: 800; line-height: 1.1; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0; }
.pd .hero-avatar-hint { display: inline-flex; margin: 6px 0 0; padding: 4px 12px; border-radius: 99px; background: rgba(0, 0, 0, .6); color: #fff; font-size: .82rem; font-weight: 700; line-height: 1.3; cursor: pointer; }
.pd-edit { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 0; display: grid; place-items: center; background: #fff; color: #1B1C22; font-size: 1.05rem; cursor: pointer; box-shadow: 0 4px 0 rgba(0, 0, 0, .45); }
.pd-edit:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .45); }

/* ── Tiles ─────────────────────────────────────────────────────────────── */
.pd-bento { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pd-tile { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px; border-radius: 22px; text-align: start; color: #fff;
    background: #17181D; border: 1px solid rgba(255, 255, 255, .06); box-shadow: 0 5px 0 #050506; font-family: var(--gt-font); }
.pd-k { font-size: .82rem; font-weight: 700; color: rgba(255, 255, 255, .62); }
.pd-v { display: flex; align-items: center; gap: 6px; font-size: 1.8rem; font-weight: 800; line-height: 1.1; }
.pd-v--win { color: #6BE07A; }
.pd-coin { font-size: 1.4rem; line-height: 1; }
.pd-ring { grid-row: span 2; align-items: center; justify-content: center; gap: 10px; }
.pd-dial { --p: 0; width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#F5C518 calc(var(--p) * 1%), #2A2B33 0); }
.pd-dial > span { width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; background: #17181D; font-size: 1.6rem; font-weight: 800; }
.pd-money .pd-btn { margin-top: auto; }
.pd-btn { min-height: 44px; width: 100%; padding: 0 10px; border-radius: 13px; border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font: 800 .95rem/1.15 var(--gt-font); cursor: pointer; transition: transform .08s, box-shadow .08s; }
.pd-btn:active:not(:disabled) { transform: translateY(3px); }
.pd-btn--blue { background: linear-gradient(180deg, #5CC8FF, #2A9BF0); color: #04263F; box-shadow: 0 4px 0 #136BB0; }
.pd-btn--gold { background: linear-gradient(180deg, #FFE066, #F5C518); color: #2A1F00; box-shadow: 0 4px 0 #B38600; }
.pd-btn:disabled { background: #2A2B33; color: rgba(255, 255, 255, .6); box-shadow: none; cursor: default; }
/* Best rank, in its game's colours (.gt-<id> from home-shelf.css; :where keeps these defaults below it). */
:where(.pd-best-tile, .pd-dot, .pd-chip) { --gt-top: #3A3F4B; --gt-bg: #2A2E37; --gt-deep: #1C1F26; --gt-out: #0E1015; --gt-pat: none; }
.pd-best-tile { grid-column: span 2; flex-direction: row; align-items: center; gap: 12px; border: 0; cursor: pointer;
    background: var(--gt-pat) 0 0 / 120px 120px repeat, linear-gradient(180deg, var(--gt-top), var(--gt-deep)); box-shadow: 0 5px 0 var(--gt-out); }
.pd-best-tile[hidden] { display: none; }
.pd-best-tile .pd-medal { font-size: 2.4rem; line-height: 1; }
.pd-best-tile .pd-t { flex: 1; min-width: 0; }
.pd-best-tile b { display: block; font-size: 1.15rem; line-height: 1.2; --o: var(--gt-out); }
.pd-best-tile .pd-t small { display: inline-block; white-space: normal; margin-top: 4px; padding: 2px 10px; border-radius: 99px; background: rgba(0, 0, 0, .5); font-weight: 700; font-size: .8rem; }

/* ── Lists ─────────────────────────────────────────────────────────────── */
.pd-h { display: flex; align-items: center; gap: 8px; margin: 24px 0 12px; font: 800 1.3rem/1.2 var(--gt-font); color: #fff; }
.pd-list { padding: 4px 14px; border-radius: 22px; background: #17181D; border: 1px solid rgba(255, 255, 255, .06); box-shadow: 0 5px 0 #050506; }
.pd-list + .pd-list { margin-top: 14px; }
.pd-li { display: flex; width: 100%; align-items: center; gap: 12px; min-height: 56px; padding: 8px 0; margin: 0; border: 0; border-top: 1px solid rgba(255, 255, 255, .06);
    background: none; color: #fff; text-decoration: none; text-align: start; font: inherit; cursor: pointer; }
.pd-list > .pd-li:first-child { border-top: 0; }
.pd-li--sw { cursor: default; }
.pd-ico { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-size: .95rem; }
.pd-t { flex: 1; min-width: 0; }
.pd-t b { display: block; font-weight: 800; font-size: 1rem; line-height: 1.3; }
.pd-t small { display: block; font-size: .82rem; font-weight: 600; line-height: 1.35; color: rgba(255, 255, 255, .58); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-li--sw .pd-t small { white-space: normal; }
.pd-chev { flex: none; color: rgba(255, 255, 255, .35); }
[dir="ltr"] .pd-chev { transform: scaleX(-1); }
.pd-li--danger b, .pd-li--danger .pd-chev { color: #FF6B78; }
/* The switch keeps its look; an invisible band makes its tap area 44 px. */
.pd .qa-switch::before { content: ''; position: absolute; inset: -7px -4px; }

/* ── Bottom sheets ─────────────────────────────────────────────────────── */
html.pd-sheet-open { overflow: hidden; }
.pd-sheet { position: fixed; inset: 0; z-index: 1500; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, .62); }
.pd-sheet[hidden] { display: none; }
.pd-sheet-panel { width: 100%; max-width: 620px; max-height: 88vh; display: flex; flex-direction: column; color: #fff;
    background: #15161B; border: 1px solid rgba(255, 255, 255, .08); border-bottom: 0; border-radius: 26px 26px 0 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, .5);
    padding-bottom: env(safe-area-inset-bottom); transform: translateY(100%); transition: transform .26s cubic-bezier(.22, 1, .36, 1); }
.pd-sheet.open .pd-sheet-panel { transform: none; }
.pd-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 8px; }
.pd-sheet-head h3 { margin: 0; font: 800 1.25rem/1.2 var(--gt-font); color: #fff; }
.pd-sheet-x { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #23242B; color: #fff; font-size: 1.05rem; cursor: pointer; }
.pd-sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 24px; text-align: start; }
.pd-sub { margin: 16px 0 8px; font-weight: 800; color: rgba(255, 255, 255, .78); }
.pd-sub:first-child { margin-top: 4px; }
.pd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; font-weight: 800; font-size: .9rem; color: #fff;
    background: linear-gradient(180deg, var(--gt-top), var(--gt-deep)); box-shadow: 0 3px 0 var(--gt-out); text-shadow: 0 1px 0 var(--gt-out), 0 -1px 0 var(--gt-out), 1px 0 0 var(--gt-out), -1px 0 0 var(--gt-out); }
.pd-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 0; border-top: 1px solid rgba(255, 255, 255, .06); }
.pd-row:first-child { border-top: 0; }
.pd-dot { flex: none; width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(180deg, var(--gt-top), var(--gt-deep)); box-shadow: 0 3px 0 var(--gt-out); }
.pd-rank { flex: none; min-width: 44px; padding: 3px 8px; border-radius: 99px; text-align: center; background: #23242B; color: rgba(255, 255, 255, .82); font-weight: 800; font-size: .85rem; }
.pd-rank--top { background: linear-gradient(180deg, #FFE066, #F5C518); color: #2A1F00; }
.pd-out { flex: none; padding: 3px 10px; border-radius: 99px; font-weight: 800; font-size: .82rem; }
.pd-out--win { background: rgba(52, 199, 89, .16); color: #6BE07A; }
.pd-out--loss { background: rgba(255, 90, 100, .14); color: #FF7A85; }
.pd-out--draw { background: rgba(255, 214, 10, .14); color: #FFD60A; }
.pd-empty { padding: 8px 0; color: rgba(255, 255, 255, .55); }
.pd-sheet .info-row { margin-bottom: 0; }
.pd-sheet .btn-gold { width: 100%; margin-top: 16px; }
/* availability-ui.js draws its own title; the sheet head already says it (its counter stays). */
.pd-sheet .qa-manage-title { display: none; }
@media (prefers-reduced-motion: reduce) { .pd-sheet-panel { transition: none; } }