/* Fable account menu (fable-account.js, owner's Draw spotlight selection, 2 Oct): the header's balance pill and dropdown (a bottom
   sheet on phones). Dark only; palette tokens only (styles.css / fable.css). Sizes are layout px: on desktop the page
   renders at html zoom .75, so the 272px dropdown is drawn at the same scale as the header around it. The person discs
   are the site's own .flb-av (fable-traders.css): the X avatar, "YOU" in metal for the demo, a neutral disc for a wallet. */

/* ---- the pill: total balance, its 24h change, the avatar */
.mast-actions{position:relative}
.wallet.acct-pill,.wallet.acct-pill[data-on="true"]{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 5px 0 15px;border:1px solid var(--line-2);border-radius:999px;background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 5%,transparent),transparent 70%),var(--panel);color:var(--ink);font:500 12.5px/1 var(--mono);cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.wallet.acct-pill:hover,.wallet.acct-pill[aria-expanded="true"]{border-color:color-mix(in srgb,var(--brand) 60%,var(--line-2));box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 12%,transparent)}
.wallet.acct-pill:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.acct-pill-money{display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:0}
.acct-pill-total{font:700 14px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.acct-pill-total{max-width:160px;overflow:hidden;text-overflow:ellipsis}
.acct-pill-chg{font:500 10.5px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.acct-pill-chg.up{color:var(--up)}.acct-pill-chg.down{color:var(--down)}
.acct-pill-chg[hidden]{display:none}
.acct-pill .acct-av{box-shadow:0 0 0 2px var(--panel),0 0 0 3px color-mix(in srgb,var(--brand) 45%,transparent)}
.acct-pill.is-loading .acct-pill-total{width:112px;height:14px;border-radius:3px}
.acct-pill.is-loading .acct-pill-total,.acct-pill.is-loading .acct-av{background:color-mix(in srgb,var(--muted) 24%,transparent);box-shadow:none;border:0;animation:acctLoading 1.2s ease-in-out infinite alternate}
.acct-pill.is-loading .acct-av::before,.acct-pill.is-loading .acct-av::after{display:none}
@keyframes acctLoading{to{opacity:.45}}
@media (prefers-reduced-motion:reduce){.acct-pill.is-loading .acct-pill-total,.acct-pill.is-loading .acct-av{animation:none}}

/* ---- the dropdown, anchored under the pill */
.acct-pop{position:absolute;top:calc(100% + 12px);right:0;z-index:60;width:272px;max-height:calc(100 * var(--vh) - 100px);overflow:auto;overscroll-behavior:contain;padding:6px;border:1px solid var(--line-2);border-radius:12px;background:var(--panel);color:var(--ink);font:400 14px/1.35 var(--sans);text-align:left;box-shadow:0 26px 60px -14px #000d,0 2px 0 #0006,inset 0 1px 0 color-mix(in srgb,var(--ink) 6%,transparent);animation:acctIn .14s ease-out;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.acct-pop [hidden]{display:none!important}
.acct-pop:focus{outline:none}
@keyframes acctIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.acct-pop :is(button,a,input):focus-visible{outline:2px solid var(--brand);outline-offset:1px}

/* who you are */
.acct-head{display:flex;align-items:center;gap:11px;padding:10px 10px 12px}
.acct-who{display:flex;flex-direction:column;gap:5px;min-width:0}
.acct-name{display:flex;align-items:center;gap:5px;min-width:0}
.acct-name b{font:800 15.5px/1.1 var(--sans);font-stretch:108%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-seal{width:14px;height:14px;flex:none}
.acct-name .acct-x{--fx-size:11px}
.acct-sub{font:500 11.5px/1.2 var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Total balance and the owner's Draw spotlight menu selection. */
.acct-kv{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 4px;padding:10px 8px;border-top:1px solid var(--line)}
.acct-kv-k{font:500 12.5px/1.2 var(--sans);color:var(--ink-2);white-space:nowrap}
.acct-kv-v{display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:0}
.acct-kv b{font:700 14px/1.1 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.acct-kv small{font:500 11px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.acct-kv small.up{color:var(--up)}.acct-kv small.down{color:var(--down)}
.acct-spotlight{margin:8px -6px 0;padding:14px 18px 16px;border-top:1px solid color-mix(in srgb,var(--brand) 65%,var(--line));background:linear-gradient(110deg,color-mix(in srgb,var(--brand) 12%,var(--panel)),color-mix(in srgb,var(--brand) 25%,var(--panel)))}
.acct-draw-head{display:flex;align-items:center;gap:8px;font:750 14px/1.3 var(--sans)}
.acct-draw-head img{width:36px;height:36px;object-fit:contain;flex:none}
.acct-draw-tickets{display:block;margin:8px 0 5px;font:700 21px/1.4 var(--mono);font-variant-numeric:tabular-nums;color:var(--brand-text-solid);overflow-wrap:anywhere}
.acct-draw-when,.acct-draw-when small{font:500 11.5px/1.5 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-2);overflow-wrap:anywhere}
.acct-pop .acct-draw-rewards{justify-content:center;gap:8px;min-height:38px;margin-top:14px;padding:8px 12px;border:1px solid var(--brand);border-radius:24px;background:var(--brand-sheen-sm);color:var(--brand-ink);box-shadow:var(--brand-bevel)}
.acct-draw-rewards .acct-item-l{flex:0 1 auto}
.acct-pop .acct-draw-rewards .acct-i{color:inherit}
.acct-pop .acct-draw-rewards:hover{background:var(--brand-sheen-sm);filter:brightness(1.12)}
.acct-pop .acct-draw-rewards:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.acct-draw-rewards .acct-tag{padding:3px 5px;background:var(--panel);color:var(--ink);box-shadow:none;font-size:10px;white-space:normal}

.acct-sep{height:1px;margin:5px 4px;background:var(--line)}
.acct-item{display:flex;align-items:center;gap:11px;width:100%;min-height:42px;padding:0 10px;border:0;border-radius:8px;background:none;color:var(--ink);font:650 13.5px/1 var(--sans);text-align:left;cursor:pointer;box-shadow:none;transform:none}
.acct-item:hover,.acct-item:focus-visible{background:var(--panel-2);outline:none}
.acct-item:focus-visible{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--brand) 70%,transparent)}
.acct-item-l{flex:1;min-width:0}
.acct-wallet-row{gap:8px}
.acct-wallet-preview{display:flex;align-items:center;flex:none;padding-left:4px}
.acct-wallet-disc{position:relative;display:grid;place-items:center;width:25px;height:25px;margin-left:-4px;border:2px solid var(--panel);border-radius:50%;background:var(--panel-2);overflow:hidden}
.acct-wallet-disc img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--panel-2);padding:2px}
.acct-wallet-disc .acct-i{width:15px;height:15px}
.acct-wallet-more{margin-left:5px;color:var(--ink-2);font:600 10px/1 var(--sans);white-space:nowrap}
.acct-item .acct-wallet-chevron{width:12px;height:12px;flex:none}
.acct-wallet-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:5px 8px 14px}
.acct-wallet-actions:has([hidden]){grid-template-columns:1fr}
.acct-pop .acct-wallet-action{justify-content:center;gap:7px;min-height:38px;padding:8px 5px;border:1px solid var(--brand);border-radius:7px;background:var(--panel-2);font-size:12px;white-space:nowrap}
.acct-wallet-action .acct-i{width:16px;height:16px;flex:none}
.acct-wallet-action .acct-item-l{flex:0 1 auto}
.acct-pop .acct-wallet-action.is-deposit{background:var(--brand-sheen-btn);color:var(--brand-ink);box-shadow:var(--brand-bevel);text-shadow:var(--brand-ink-shadow)}
.acct-pop .acct-wallet-action.is-deposit .acct-i{color:inherit}
.acct-pop .acct-wallet-action:hover{filter:brightness(1.12)}
.acct-pop .acct-wallet-action:disabled{opacity:.45;cursor:not-allowed;filter:none}
.acct-pop.is-sheet .acct-wallet-action{font-size:13px}
.acct-i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.acct-item .acct-i{color:var(--muted)}.acct-item:hover .acct-i,.acct-item:focus-visible .acct-i{color:var(--brand)}
.acct-hint{font:500 11px/1 var(--mono);font-style:normal;color:var(--muted);white-space:nowrap}
.acct-tag{padding:4px 8px;border-radius:999px;background:var(--brand-sheen-sm);color:var(--brand-ink);font:800 10.5px/1 var(--sans);font-style:normal;white-space:nowrap;box-shadow:var(--brand-bevel)}
.acct-item.is-out{color:var(--ink-2)}

/* ---- the panels (Wallets, Rewards): the same surface, a back arrow in place of the menu. Rewards holds the draw panel
   (fable-draw.css) and your nights, so its dropdown is a little wider */
.acct-pop.is-wide:not(.is-sheet){width:372px}
.acct-ph{display:flex;align-items:center;gap:6px;padding:4px 4px 8px}
.acct-back{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:8px;background:none;color:var(--ink-2);cursor:pointer;box-shadow:none;transform:none}
.acct-back:hover{background:var(--panel-2);color:var(--ink)}
.acct-ph h3{margin:0;font:800 15.5px/1 var(--sans);font-stretch:108%;letter-spacing:0;text-transform:none}
.acct-note{margin:0 8px 10px;font:500 11.5px/1.45 var(--sans);color:var(--muted)}
.acct-foot{margin:12px 8px 4px}

.acct-wl{margin:0;padding:0;list-style:none}
.acct-w{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 8px;border-top:1px solid var(--line)}
.acct-w.is-payout{background:linear-gradient(90deg,color-mix(in srgb,var(--brand) 9%,transparent),transparent 70%)}
.acct-radio{appearance:none;-webkit-appearance:none;display:grid;place-items:center;width:17px;height:17px;margin:0;border:1.5px solid var(--line-2);border-radius:50%;background:var(--bg);cursor:pointer}
.acct-radio:checked{border-color:var(--brand)}
.acct-radio:checked::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--brand-outline)}
.acct-radio:disabled{cursor:not-allowed;opacity:.6}
.acct-w-main{display:flex;flex-direction:column;gap:5px;min-width:0}
.acct-w-name{display:flex;align-items:center;gap:6px;min-width:0}
.acct-w-name b{font:700 13px/1.15 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-w-tag{flex:none;padding:2px 5px;border:1px solid var(--line-2);border-radius:4px;font:600 9.5px/1 var(--mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.acct-w-addr{display:flex;align-items:center;gap:3px;font:500 11px/1 var(--mono);color:var(--muted)}
.acct-copy{display:grid;place-items:center;width:22px;height:22px;padding:0;border:0;border-radius:5px;background:none;color:var(--muted);cursor:pointer;box-shadow:none;transform:none}
.acct-copy:hover{background:var(--panel-2);color:var(--ink)}
.acct-copy .acct-i{width:13px;height:13px}
.acct-w-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.acct-w-side b{font:700 12.5px/1 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.acct-unlink{padding:0;border:0;background:none;color:var(--muted);font:600 11px/1 var(--sans);text-decoration:underline;text-underline-offset:2px;cursor:pointer;box-shadow:none;transform:none}
.acct-unlink:hover{color:var(--down)}
.acct-link{display:flex;align-items:center;justify-content:center;gap:6px;width:calc(100% - 8px);min-height:40px;margin:8px 4px 2px;border:1px dashed var(--line-2);border-radius:8px;background:none;color:var(--ink-2);font:700 13px/1 var(--sans);cursor:pointer;box-shadow:none;transform:none}
.acct-link:hover{border-color:var(--brand-text-solid);color:var(--brand-text-solid)}
.acct-link .acct-i{width:15px;height:15px}
.acct-link[aria-disabled="true"]{cursor:default;color:var(--muted);border-color:var(--line)}

.acct-rsum{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 4px 10px}
.acct-rsum>div{min-width:0;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.acct-rsum>div>span{display:block;margin-bottom:7px;font:500 10.5px/1.2 var(--sans);color:var(--muted)}
.acct-rsum b{display:block;font:700 13.5px/1.1 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-rsum>div:first-child b{color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.acct-rsum small{display:block;margin-top:4px;font:500 10.5px/1 var(--mono);color:var(--muted)}
.acct-days{width:100%;border-collapse:collapse;font:500 11.5px/1 var(--mono);font-variant-numeric:tabular-nums}
.acct-days th{padding:0 6px 7px;color:var(--muted);font:500 10.5px/1 var(--sans);text-align:right;white-space:nowrap}
.acct-days :is(th,td):first-child{text-align:left}
.acct-days td{height:34px;padding:0 6px;border-top:1px solid var(--line);text-align:right;white-space:nowrap}
.acct-days th.acct-sr{font-size:0}
.acct-h4{margin:14px 8px 8px;font:600 10px/1.2 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.acct-res.is-won{color:var(--up)}
.acct-res.is-not-drawn{color:var(--ink-2)}
.acct-res.is-not-entered,.acct-st-none{color:var(--muted)}
.acct-st-ok{color:var(--up);text-decoration:none}
a.acct-st-ok:hover{text-decoration:underline}
.acct-st-wait{color:var(--muted)}
.acct-claim{padding:6px 10px;border:0;border-radius:6px;background:var(--brand-sheen-sm);color:var(--brand-ink);font:800 11px/1 var(--sans);cursor:pointer;box-shadow:var(--brand-bevel);transform:none}
.acct-claim:hover{filter:brightness(1.08)}
.acct-claim[aria-disabled="true"]{background:var(--panel-2);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line-2);cursor:not-allowed;filter:none}
.acct-pager{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 4px 2px;font:500 11px/1 var(--mono);color:var(--muted)}
.acct-pager button{padding:7px 10px;border:1px solid var(--line-2);border-radius:6px;background:none;color:var(--ink-2);font:650 11.5px/1 var(--sans);cursor:pointer;box-shadow:none;transform:none}
.acct-pager button:hover:not(:disabled){border-color:var(--brand-text-solid);color:var(--brand-text-solid)}
.acct-pager button:disabled{opacity:.4;cursor:default}
.acct-empty{margin:4px 4px 6px;padding:16px 12px;border:1px dashed var(--line-2);border-radius:8px;font:500 12px/1.45 var(--sans);color:var(--muted);text-align:center}

/* ---- phones: a bottom sheet over a dimmed page */
.acct-scrim{position:fixed;inset:0;z-index:110;background:rgba(6,5,4,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:acctFade .16s ease-out}
.acct-pop.is-sheet{position:fixed;top:auto;right:0;bottom:0;left:0;z-index:111;width:auto;max-height:82vh;max-height:82dvh;padding:6px 10px calc(14px + env(safe-area-inset-bottom));border-bottom:0;border-radius:16px 16px 0 0;animation:acctUp .2s ease-out}
.acct-pop.is-sheet::before{content:"";display:block;width:38px;height:4px;margin:4px auto 8px;border-radius:2px;background:var(--line-2)}
.acct-pop.is-sheet .acct-item{min-height:48px;font-size:15px}
.acct-pop.is-sheet .acct-spotlight{margin-left:-10px;margin-right:-10px;padding-left:20px;padding-right:20px}
@keyframes acctFade{from{opacity:0}to{opacity:1}}
@keyframes acctUp{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
@media (max-width:640px){
  .wallet.acct-pill,.wallet.acct-pill[data-on="true"]{height:40px;gap:8px;padding-left:12px}
  .acct-pill-total{font-size:13px}
  .acct-pill .acct-av{--s:28px!important}
}
@media (prefers-reduced-motion:reduce){.acct-pop,.acct-pop.is-sheet,.acct-scrim{animation:none}.wallet.acct-pill{transition:none}}

/* the Fable mark beside a $FABLE amount (Won in Fable Drops, a night's winnings) */
.acct-fable-logo{display:inline-block;width:1.25em;height:1.25em;margin:0 .28em 0 .05em;vertical-align:-.28em;object-fit:contain;-webkit-text-fill-color:initial}