:root {
  color-scheme: dark;
  --bg: #151719;
  --sidebar: #1a1d20;
  --panel: #1f2225;
  --panel-raised: #2c3034;
  --line: #3b4249;
  --text: #f3f3f3;
  --muted: #b4babe;
  --blue: #4d8ee7;
  --blue-deep: #315986;
  --display: "Space Grotesk", sans-serif;
  --body: "DM Sans", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 var(--body), Arial, sans-serif; -webkit-font-smoothing: antialiased; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.sidebar { position: fixed; z-index: 5; inset: 0 auto 0 0; display: flex; flex-direction: column; width: 284px; padding: 25px 10px 17px; overflow-y: auto; scrollbar-width: none; background: var(--sidebar); border-right: 1px solid #32363b; }
.brand { display: block; min-height: 86px; margin: 0 0 35px; padding: 4px 0 0; }
.brand-mark { display: grid; flex: none; place-items: center; width: 62px; height: 62px; overflow: hidden; border: 0; border-radius: 50%; background: transparent; }
.brand-mark img { display: block; width: 62px; height: 62px; border-radius: 50%; object-fit: contain; }
.brand-name { display: block; width: 100%; font-family: "Bowlby One SC", Impact, sans-serif; font-kerning: none; font-variant-ligatures: none; text-align: center; text-transform: uppercase; }
.brand-name strong, .brand-name span { display: block; width: max-content; max-width: 100%; margin-right: auto; margin-left: auto; white-space: nowrap; font-weight: 400; transform-origin: center center; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: .55px #07111d; }
.brand-name strong { color: #45aaff; font-size: 25px; line-height: 1.13; letter-spacing: .012em; background-image: linear-gradient(180deg, #b5e5ff 0%, #66c0ff 17%, #258fee 60%, #52adf7 76%, #116dc9 100%); filter: drop-shadow(0 2px 0 #0f1113); }
.brand-name span { margin-top: -2px; color: #f5f9ff; font-size: 22px; line-height: 1.13; letter-spacing: .014em; background-image: linear-gradient(180deg, #fff 0%, #f8fbff 24%, #d9e6f3 67%, #f8fbff 82%, #bdcede 100%); filter: drop-shadow(0 2px 0 #0f1113); }
.brand-mini { display: none; }
.brand-roll { position: absolute; top: 97px; right: 17px; left: 17px; height: 44px; overflow: hidden; pointer-events: none; --roll-distance: 218px; }
.brand-roll img { position: absolute; top: 2px; left: 0; display: block; width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 3px 2px #0008); animation: brand-roll 7s linear infinite; will-change: transform, opacity; }
@keyframes brand-roll { 0% { transform: translateX(-42px) rotate(-120deg); opacity: 0; } 5%, 52% { opacity: 1; } 57%, 100% { transform: translateX(var(--roll-distance)) rotate(600deg); opacity: 0; } }
.primary-nav { display: grid; gap: 4px; }
/* flex-shrink: 0 keeps the 1px line from being squeezed to nothing in short windows. */
.sidebar-separator { flex-shrink: 0; height: 1px; margin: 19px 8px; background: #3b4249; }
.policy-nav { margin-bottom: 10px; }
.nav-link { position: relative; display: flex; align-items: center; gap: 11px; min-height: 41px; padding: 0 10px; border: 1px solid transparent; border-radius: 7px; color: #b7bdc1; font-size: 13px; font-weight: 500; transition: background-color .18s ease, color .18s ease, transform .18s ease; }
.nav-link img { width: 16px; height: 16px; filter: invert(1); }
.nav-link:hover { background: #33373c; color: #fff; }
.nav-link:active { transform: scale(.985); }
.nav-link.active { border-color: var(--blue); background: var(--blue); color: #fff; }
.nav-link.active img { filter: invert(1); }
.game-list { width: 100%; }
.games-list-inner { display: grid; gap: 4px; }
.game-item { width: 100%; background: transparent; font-family: var(--body); text-align: left; cursor: pointer; }
.game-item svg { display: block; flex: none; width: 16px; height: 16px; }
.purchase-badge { display: grid; flex: none; min-width: 18px; height: 18px; margin-left: auto; padding: 0 4px; place-items: center; border-radius: 999px; background: #e04852; color: #fff; font: 700 10px/1 var(--body); font-variant-numeric: tabular-nums; }
.purchase-badge[hidden] { display: none; }
.wallet-panel { padding: 15px 13px 13px; border: 1px solid #3b4249; border-radius: 9px; background: #2c3034; }
.wallet-heading { display: flex; align-items: center; justify-content: space-between; color: #c8cdcf; font-size: 11px; font-weight: 600; }
.wallet-balance { display: flex; align-items: center; gap: 7px; margin-top: 10px; font: 600 21px var(--display); letter-spacing: -.45px; font-variant-numeric: tabular-nums; }
.wallet-icon { display: block; flex: none; width: 19px; height: 19px; filter: invert(59%) sepia(46%) saturate(1002%) hue-rotate(183deg) brightness(103%) contrast(96%); }
.credit-wallet-icon { display: block; flex: none; width: 15px; height: 15px; filter: invert(59%) sepia(46%) saturate(1002%) hue-rotate(183deg) brightness(103%) contrast(96%); }
.credits-label { color: #b1b8bb; font: 500 11px var(--body); letter-spacing: 0; }
.wallet-panel p { margin: 3px 0 12px; color: #a3aaad; font-size: 11px; }
.text-button { display: flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: #c2c8ca; font-size: 11px; cursor: pointer; transition: color .18s ease, transform .18s ease; }
.text-button:hover { color: #fff; }
.text-button:active { transform: translateY(1px); }
.text-button img { width: 13px; height: 13px; filter: invert(1); }

.main-area { min-height: 100vh; margin-left: 284px; background: var(--bg); }
.topbar { position: sticky; z-index: 8; top: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; height: 65px; padding: 0 clamp(24px, 4.1vw, 65px); border-bottom: 1px solid #25292d; background: var(--sidebar); }
.breadcrumb, .topbar-right { display: flex; align-items: center; }
.breadcrumb { grid-column: 1; }
.breadcrumb { gap: 10px; color: #b6bcbf; font-size: 12px; }
.breadcrumb span:last-child { color: #fff; font-weight: 500; }
.crumb-slash { color: #a3aaad; }
.topbar-right { grid-column: 3; justify-self: end; gap: 12px; }
.wallet-center-wrap { grid-column: 2; justify-self: center; }
.top-wallet { display: flex; min-height: 34px; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid #464d54; border-radius: 7px; background: #2c3034; color: #fff; font: 600 12px var(--display); font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color .16s ease, background-color .16s ease, color .16s ease; }
.top-wallet:hover, .top-wallet[aria-expanded="true"] { border-color: #72797c; background: #33373c; color: #fff; }
.top-wallet:focus-visible { outline: none; border-color: #848b8d; box-shadow: none; }
.top-wallet .wallet-icon { width: 17px; height: 17px; }
.avatar-button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid #585f65; border-radius: 50%; background: #34383d; color: #fff; font: 600 11px var(--display); cursor: pointer; transition: transform .18s ease, background-color .18s ease; }
.avatar-button:hover { transform: translateY(-1px); background: #3b4249; }
.avatar-button .profile-avatar { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.avatar-button > span[hidden], .avatar-button > img[hidden] { display: none; }
.avatar-button.login-button { width: auto; min-width: 76px; height: 32px; padding: 0 14px; border: 0; border-radius: 6px; background: var(--blue); color: #fff; font: 600 12px var(--display); }
.avatar-button.login-button:hover { transform: none; background: #5a99ee; }
.discord-link { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; color: #c3c8ca; transition: color .18s ease, background-color .18s ease, transform .18s ease; }
.discord-link img { width: 18px; height: 18px; filter: invert(1); opacity: .8; }
.discord-link:hover { transform: translateY(-1px); background: #373b40; color: #fff; }
.notification-wrap { position: relative; }
.notification-button { position: relative; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: #d5d9db; cursor: pointer; transition: background-color .18s ease, color .18s ease; }
.notification-button img { width: 18px; height: 18px; filter: invert(1); opacity: .86; }
.notification-button:hover, .notification-button[aria-expanded="true"] { background: #383c41; color: #fff; }
.notification-button:focus:not(:focus-visible) { outline: none; }
.notification-button:focus-visible { outline: none; }
.notification-badge { position: absolute; top: -2px; right: -3px; display: grid; min-width: 16px; height: 16px; padding: 0 4px; place-items: center; border: 2px solid var(--bg); border-radius: 999px; background: #e04852; color: #fff; font: 700 9px/1 var(--body); font-variant-numeric: tabular-nums; }
.notification-badge[hidden] { display: none; }
.notification-popover { position: absolute; z-index: 30; top: calc(100% + 12px); right: -55px; width: min(330px, calc(100vw - 28px)); overflow: hidden; border: 1px solid #454c53; border-radius: 10px; background: #2c3034; box-shadow: 0 18px 48px #0008; animation: popover-enter .16s ease-out both; }
.notification-popover[hidden] { display: none; }
@keyframes popover-enter { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.popover-heading { display: flex; align-items: center; justify-content: space-between; padding: 14px 15px 11px; border-bottom: 1px solid #3b4148; }
.popover-heading strong { font: 600 13px var(--display); }
.popover-heading span { color: #a3aaad; font-size: 10px; }
.notification-list { max-height: 330px; overflow-y: auto; }
.notification-empty { margin: 0; padding: 21px 15px 23px; color: #b3b9bd; font-size: 12px; text-align: center; }
.notification-item { position: relative; display: grid; width: 100%; gap: 4px; padding: 12px 15px; border: 0; border-bottom: 1px solid #3b4047; background: transparent; color: #eee; text-align: left; cursor: pointer; transition: background-color .16s ease; }
.notification-item:last-child { border-bottom: 0; }
.notification-item:hover { background: #373b40; }
.notification-item.unread::before { position: absolute; top: 17px; left: 6px; width: 5px; height: 5px; border-radius: 50%; background: #4d8ee7; content: ""; }
.notification-item strong { font-size: 11px; font-weight: 600; }
.notification-item span { color: #bac0c3; font-size: 11px; line-height: 1.45; }
.notification-item small { color: #8f9698; font-size: 9px; }
.mobile-brand { display: none; }
.page-content { max-width: 1230px; margin: 0 auto; padding: 37px clamp(24px, 4.1vw, 65px) 23px; }
.hero { display: grid; grid-template-columns: 1.15fr .85fr; align-items: stretch; gap: 45px; min-height: 262px; margin-bottom: 22px; }
.hero-copy { align-self: center; padding: 7px 0 12px; }
.hero-copy > .hero-greeting { margin: -8px 0 13px; color: #f3f3f3; font: 600 clamp(22px, 2.7vw, 35px)/1.15 var(--display); letter-spacing: -.055em; }
.hero-copy > .hero-greeting strong { color: #65d89a; font-weight: 700; }
.hero h1 { margin: 0 0 12px; font: 600 clamp(35px, 4.15vw, 53px)/1.04 var(--display); letter-spacing: -2.45px; }
.hero h1 span { color: #83b4ff; background: linear-gradient(105deg, #a9ceff 0%, #6fa6f4 55%, #91baff 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero-copy > p { max-width: 405px; margin: 0; color: #d7dbdd; font-size: 14px; line-height: 1.65; }
.hero-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; color: #fff; font-size: 12px; font-weight: 600; }
.hero-link span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #383c41; transition: transform .2s ease, background-color .2s ease; }
.hero-link span img { width: 14px; height: 14px; filter: invert(1); transition: filter .2s ease; }
.hero-link:hover span { transform: scale(1.08); background: var(--blue); }
.hero-link:hover span img { filter: none; }
.hero-art { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; min-height: 248px; overflow: hidden; border: 1px solid #6686a9; border-radius: 10px; background: #315986; }
.hero-art::after { position: absolute; top: -158px; right: -117px; width: 310px; height: 310px; border: 1px solid #ffffff35; border-radius: 50%; box-shadow: 0 0 0 34px #ffffff08, 0 0 0 70px #ffffff06; content: ""; }
.art-orbit { position: absolute; border: 1px solid #d4e4f526; border-radius: 50%; transform: rotate(-27deg); }
.orbit-one { top: 58px; left: 15px; width: 410px; height: 145px; }
.orbit-two { top: 91px; left: 51px; width: 390px; height: 130px; }
.hero-brand-pair { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 17px; }
.hero-market-mark { width: 92px; height: 92px; border-radius: 50%; object-fit: contain; filter: drop-shadow(0 8px 12px #172a3b50); }
.hero-link-mark { display: grid; width: 92px; height: 92px; place-items: center; }
.hero-link-mark img { width: 82px; height: 82px; filter: invert(1); }
.hero-art-caption { position: relative; z-index: 1; display: grid; gap: 2px; color: #fff; text-align: center; }
.hero-art-caption strong { font: 600 13px var(--display); }
.hero-art-caption span { color: #d2dfec; font-size: 11px; }
.art-coordinate { position: absolute; top: 18px; left: 20px; color: #e0e8f1; font-size: 9px; font-weight: 700; letter-spacing: 1.2px; }
.account-stamp { position: absolute; top: 48%; left: 50%; display: flex; align-items: center; gap: 12px; width: 207px; padding: 13px 14px; transform: translate(-50%, -50%) rotate(-5deg); border: 1px solid #d7e8ff61; border-radius: 7px; background: #203a59; box-shadow: 0 13px 28px #132a4326; }
.stamp-mark { display: grid; place-items: center; width: 39px; height: 39px; border: 1px solid #c5d4e666; border-radius: 5px; color: #fff; font: 700 13px var(--display); }
.account-stamp b, .account-stamp small { display: block; color: #fff; }
.account-stamp b { font: 600 10px var(--display); letter-spacing: 1px; }
.account-stamp small { margin-top: 4px; font-size: 8px; letter-spacing: .8px; }
.account-stamp img { width: 14px; height: 14px; margin-left: auto; filter: invert(1); opacity: .9; }
.art-bottom { position: absolute; inset: auto 20px 17px; display: flex; align-items: end; justify-content: space-between; color: #fff; font: 600 9px/1.35 var(--display); letter-spacing: 1.1px; }
.art-index { color: #e3eaf1; font-size: 9px; letter-spacing: .6px; }
.notice-strip { display: flex; align-items: center; gap: 9px; margin: 0 0 34px; padding: 11px 13px; border: 1px solid #525960; border-radius: 7px; background: #383c41; color: #d3d7d9; font-size: 11px; }
.notice-strip img { width: 14px; height: 14px; filter: invert(1); }
.notice-strip strong { color: #fff; font-weight: 600; }
.catalog-section { scroll-margin-top: 22px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 18px; }
.section-heading h2, .content-panel h2 { margin: 0; font: 600 22px/1.2 var(--display); letter-spacing: -.65px; }
.item-count { display: flex; align-items: baseline; gap: 7px; color: #fff; font: 600 17px var(--display); font-variant-numeric: tabular-nums; }
.item-count span { color: #c2c8ca; font: 600 9px var(--body); letter-spacing: 1px; }
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.product-card { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 475px; overflow: hidden; padding: 17px 20px 17px; border: 1px solid #495057; border-radius: 11px; background: var(--panel); transition: border-color .2s ease, transform .2s ease; }
.product-card:hover { transform: translateY(-2px); border-color: #848b8d; }
.featured-wrap { position: relative; display: flex; min-width: 0; border: 2px solid #f5f7fb; border-radius: 12px; background: #315986; transition: transform .2s ease; }
.featured-wrap:hover { transform: translateY(-2px); }
.featured-card { flex: 1; min-width: 0; border: 0; border-radius: 10px; background: linear-gradient(148deg, #3b6c9d 0%, #315986 57%, #2b5079 100%); }
.featured-card:hover { transform: none; border-color: transparent; box-shadow: none; }
.popular-badge { position: absolute; z-index: 3; top: -16px; left: 50%; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 30px; padding: 4px 15px; transform: translateX(-50%); border-radius: 999px; background: #f5f7fb; color: #171c25; font: 600 12px/1 var(--display); white-space: nowrap; }
.popular-badge img { display: block; width: 15px; height: 15px; }
.product-topline { display: flex; align-items: center; justify-content: space-between; }
.product-kicker { color: #d9dddf; font-size: 9px; font-weight: 700; letter-spacing: 1px; }
.product-code { color: #c7ccce; font: 500 9px var(--display); letter-spacing: .65px; }
.gift-art { display: flex; align-items: center; justify-content: center; height: 154px; margin: 0 0 7px; }
.gift-art img { display: block; width: min(160px, 72%); height: 139px; filter: drop-shadow(0 5px 4px #0003); object-fit: contain; transition: transform .32s cubic-bezier(.2,.7,.3,1), filter .32s ease; }
.product-card:hover .gift-art img { filter: drop-shadow(0 8px 7px #0004); transform: translateY(-3px) rotate(-1deg) scale(1.025); }
.product-symbol { position: relative; display: flex; align-items: center; justify-content: center; width: 48px; height: 45px; margin: 20px 0 13px; overflow: hidden; border: 1px solid #585f65; border-radius: 8px; background: #3b4249; color: #fff; font: 700 16px var(--display); }
.product-symbol > span { position: relative; z-index: 2; }
.basic-symbol i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #c2c8ca; }
.basic-symbol i:nth-of-type(1) { top: 9px; right: 10px; }
.basic-symbol i:nth-of-type(2) { bottom: 8px; left: 9px; }
.basic-symbol i:nth-of-type(3) { top: 10px; left: 10px; width: 2px; height: 2px; }
.cosmetic-symbol { border-color: #70777b; background: #3b4249; color: #fff; }
.spark { position: absolute; width: 4px; height: 4px; transform: rotate(45deg); background: #fff; }
.spark-a { top: 8px; right: 8px; }
.spark-b { bottom: 10px; left: 8px; width: 3px; height: 3px; }
.spark-c { right: 10px; bottom: 8px; width: 2px; height: 2px; }
.product-card h3 { margin: 0; color: #fff; font: 600 18px/1.22 var(--display); letter-spacing: -.45px; text-align: center; }
.product-description { min-height: 39px; max-width: 340px; margin: 7px auto 10px; color: #d3d7d9; font-size: 12px; line-height: 1.55; text-align: center; }
.account-odds { width: 100%; margin: auto 0 16px; padding: 0; border: 0; }
.account-odds > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 3px 0; color: #c7ccce; font-size: 10px; line-height: 1.4; }
.account-odds > div:nth-child(3), .account-odds > div:nth-child(5) { margin-top: 5px; padding-top: 8px; border-top: 1px solid #ffffff24; }
.account-odds strong { color: #fff; font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; }
.product-meta { display: flex; align-items: center; justify-content: space-between; color: #d3d7d9; font-size: 11px; }
.product-meta .price { color: #fff; font: 600 15px var(--display); font-variant-numeric: tabular-nums; }
.credit-meta { margin-top: 5px; }
.credit-meta > span:last-child { display: flex; align-items: center; gap: 6px; color: #fff; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.coin-icon.small { width: 15px; height: 15px; font-size: 8px; }
.buy-button { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 39px; overflow: hidden; margin-top: 15px; padding: 0 12px; border: 0; border-radius: 6px; background: #3a3f46; color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.buy-button > * { position: relative; z-index: 1; }
.buy-button::before, .credit-button::before { position: absolute; z-index: 0; top: -42%; bottom: -42%; left: -28%; width: 23%; background: linear-gradient(90deg, transparent, #fff2 36%, #fff7 50%, #fff2 64%, transparent); content: ""; pointer-events: none; transform: skewX(-23deg) translateX(-180%); }
.buy-button:not(:disabled):hover { background: #3b4249; box-shadow: 0 4px 13px #0006; }
.buy-button:not(:disabled):hover::before, .credit-button:hover::before { animation: button-sheen 2s ease-in-out infinite; }
.buy-button:active { transform: scale(.985); }
.buy-button:disabled { opacity: .48; cursor: not-allowed; }
.buy-button img { width: 14px; height: 14px; filter: invert(1); }
.primary-buy { background: linear-gradient(105deg, #4b91e8 0%, #377bd5 100%); color: #fff; }
.primary-buy:not(:disabled):hover, .primary-buy:not(:disabled):focus { background: linear-gradient(105deg, #5a9df0 0%, #3f83dc 100%); box-shadow: 0 4px 15px #337bd760; }
.primary-buy:not(:disabled):active { background: linear-gradient(105deg, #3f83dc 0%, #3175cf 100%); }
.primary-buy:disabled { background: linear-gradient(105deg, #447fca 0%, #306aaf 100%); color: #fff; opacity: .78; }
.primary-buy:disabled::before { animation: none; }
@keyframes button-sheen { 0% { transform: skewX(-23deg) translateX(-180%); } 42%, 100% { transform: skewX(-23deg) translateX(570%); } }
.buy-button:focus-visible, .dialog-actions button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #ffffffcc; }

.credits-panel { padding-top: 0; }
.credits-panel h2 { margin: 0 0 18px; color: var(--text); }
.credit-card-icon img { width: 43px; height: 34px; filter: invert(.82) grayscale(1); }
.credit-button { position: relative; isolation: isolate; width: 100%; height: 36px; overflow: hidden; margin-top: auto; border: 0; border-radius: 6px; background: #4d8ee7; color: #fff; font-size: 11px; font-weight: 600; cursor: pointer; transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.credit-button:hover { transform: translateY(-1px); background: #629cec; box-shadow: 0 4px 15px #337bd755; }
.credit-button:active { transform: scale(.985); }
.credit-button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #ffffffcc; }
.order-row { width: 100%; font: inherit; text-align: left; }
.order-details { display: grid; }
.order-row-action { border: 1px solid #424950; background: #303438; color: var(--text); cursor: pointer; transition: background-color .16s ease, border-color .16s ease, transform .16s ease; }
.order-row-action:hover { transform: translateY(-1px); border-color: #70777b; background: #373b40; }
.order-open { display: grid; flex: none; width: 30px; height: 30px; place-items: center; border-radius: 5px; background: #3a3f46; }
.order-open img { width: 15px; height: 15px; filter: invert(1); }

.content-panel { min-height: 450px; padding: 20px 0 40px; }
.content-panel h2 { margin-top: 9px; font-size: 27px; }
.panel-intro { max-width: 540px; margin: 10px 0 23px; color: #d7dbdd; font-size: 13px; line-height: 1.65; }
.orders-list { display: grid; max-width: 760px; gap: 10px; margin-top: 22px; }
.empty-state { padding: 26px 0; border-bottom: 1px solid #575e64; color: #d3d7d9; font-size: 12px; }
.order-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border: 1px solid #40474e; border-radius: 8px; background: #303438; }
.order-name { font: 600 14px var(--display); }
.order-date { margin-top: 4px; color: #bac0c3; font-size: 11px; }
.order-value { color: #eee; font-size: 12px; font-variant-numeric: tabular-nums; }
.how-list { display: grid; max-width: 950px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.how-list > article { display: grid; grid-template-columns: 34px 1fr; gap: 10px; min-height: 150px; padding: 17px; border: 1px solid #40474e; border-radius: 9px; background: #303438; }
.how-number { color: #fff; font: 600 12px var(--display); }
.how-list h3 { margin: 0; font: 600 14px var(--display); }
.how-list p { margin: 5px 0 0; color: #d3d7d9; font-size: 12px; line-height: 1.6; }
.chicken-cross-panel { max-width: 1000px; }
.chicken-cross-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.chicken-cross-heading h2 { margin: 0; font: 600 29px/1.15 var(--display); letter-spacing: -.8px; }
.chicken-cross-heading .panel-intro { margin: 8px 0 0; }
.game-kicker { margin: 0 0 7px; color: #92c9a8; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; }
.game-score { display: grid; min-width: 112px; justify-items: end; gap: 1px; padding: 9px 13px; border: 1px solid #4c5f51; border-radius: 8px; background: #2d382f; }
.game-score span { color: #c1cbbf; font-size: 10px; }
.game-score strong { color: #e9f3e9; font: 600 22px/1.2 var(--display); font-variant-numeric: tabular-nums; }
.crossing-card { max-width: 760px; margin-top: 25px; padding: 13px; border: 1px solid #3e454c; border-radius: 10px; background: #2e3237; }
.crossing-topline, .crossing-bottomline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.crossing-topline { padding: 1px 2px 11px; color: #bfc5bc; font-size: 9px; font-weight: 700; letter-spacing: 1px; }
.road-light { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #7bc894; box-shadow: 0 0 9px #7bc89455; vertical-align: 1px; }
.crossing-reset { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid #454c53; border-radius: 6px; background: #34383d; color: #ededed; font-size: 10px; cursor: pointer; transition: border-color .16s ease, background-color .16s ease; }
.crossing-reset:hover { border-color: #70777b; background: #3a3f46; }
.crossing-reset img { width: 13px; height: 13px; filter: invert(1); }
.crossing-board-wrap { display: grid; place-items: center; padding: 12px; border-radius: 7px; background: #202326; }
#cross-canvas { display: block; width: min(100%, 576px); height: auto; border-radius: 5px; outline: none; }
#cross-canvas:focus-visible { box-shadow: 0 0 0 2px #86b995; }
.crossing-bottomline { padding: 11px 2px 1px; }
.crossing-bottomline p { margin: 0; color: #dee2e4; font-size: 11px; }
.crossing-bottomline > span, .game-boundary-note { color: #a2a9ac; font-size: 10px; }
.crossing-controls { display: flex; max-width: 760px; align-items: center; justify-content: space-between; gap: 20px; margin-top: 15px; }
.crossing-help { display: grid; gap: 4px; }
.crossing-help strong { color: #ededed; font: 600 12px var(--display); }
.crossing-help span { max-width: 440px; color: #b2b8bc; font-size: 11px; line-height: 1.5; }
.crossing-pad { display: grid; justify-items: center; gap: 4px; flex: none; }
.crossing-pad > div { display: flex; gap: 4px; }
.crossing-pad button { display: grid; width: 35px; height: 31px; place-items: center; border: 1px solid #454c53; border-radius: 6px; background: #34383d; color: #f4f4f4; font-size: 16px; line-height: 1; cursor: pointer; transition: background-color .14s ease, border-color .14s ease, transform .14s ease; }
.crossing-pad button:hover { transform: translateY(-1px); border-color: #7aa88a; background: #3b4a3f; }
.crossing-pad button:active { transform: scale(.96); }
.game-boundary-note { max-width: 760px; margin: 13px 0 0; line-height: 1.5; }
.policy-panel { max-width: 880px; }
.policy-lead { margin: 10px 0 21px; color: #bcc2c5; font-size: 13px; }
.policy-list { display: grid; gap: 10px; }
.policy-list article { padding: 15px 17px; border: 1px solid #3d444b; border-radius: 8px; background: #303438; }
.policy-list h3 { margin: 0 0 5px; font: 600 13px var(--display); }
.policy-list p { margin: 0; color: #bbc1c4; font-size: 11px; line-height: 1.7; }
.policy-list a { color: #9cc5f4; text-decoration: underline; text-underline-offset: 2px; }
.hidden { display: none !important; }
.view-enter { animation: view-enter .26s cubic-bezier(.2,.7,.2,1) both; }
@keyframes view-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.purchase-dialog { width: min(430px, calc(100vw - 28px)); max-height: calc(100dvh - 24px); padding: 0; overflow-x: hidden; overflow-y: auto; border: 1px solid #2d333a; border-radius: 16px; background: #1f2327; color: var(--text); box-shadow: 0 30px 70px #000c; }
.purchase-dialog::backdrop { background: #0b0c0ecc; backdrop-filter: blur(6px); }
.purchase-dialog[open] { animation: dialog-enter .18s ease-out both; }
@keyframes dialog-enter { from { opacity: 0; transform: translateY(7px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
.purchase-art { display: grid; place-items: center; height: 112px; background: radial-gradient(ellipse at 50% 30%, #375d80, #233c57); }
.purchase-dialog[data-product="cosmetic"] .purchase-art { background: radial-gradient(ellipse at 50% 30%, #624a76, #382d4b); }
.purchase-art img { width: 108px; height: 108px; object-fit: contain; filter: drop-shadow(0 8px 8px #0006); }
.purchase-body { padding: 20px 22px 22px; }
.purchase-dialog .dialog-close { z-index: 1; top: 10px; right: 10px; background: #111a25a8; }
.purchase-dialog .dialog-close:hover, .purchase-dialog .dialog-close:focus-visible { background: #111a25e0; }
.purchase-dialog .dialog-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.dialog-close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; transition: background-color .18s ease, transform .18s ease; }
.dialog-close:hover { transform: scale(1.04); background: #3a3f46; }
.dialog-close:focus-visible { outline: none; background: #3a3f46; }
.dialog-close img { width: 19px; height: 19px; filter: invert(1); }
.section-eyebrow { color: #bfc5c7; font-size: 9px; letter-spacing: 1.25px; }
.purchase-dialog h2 { margin: 0 0 15px; font: 400 28px/1.05 "Lilita One", sans-serif; letter-spacing: .01em; }
.purchase-dialog h2:focus { outline: none; }
.delivery-dialog { position: relative; width: min(430px, calc(100vw - 32px)); padding: 25px; border: 1px solid #596066; border-radius: 12px; background: #303438; color: var(--text); box-shadow: 0 24px 80px #0008; }
.delivery-dialog::backdrop { background: #0f1113b8; backdrop-filter: blur(3px); }
.delivery-dialog[open] { animation: dialog-enter .2s ease-out both; }
.delivery-brand { display: flex; align-items: center; gap: 11px; color: #dde1e3; font: 700 15px var(--display); letter-spacing: .4px; }
.delivery-brand small { display: block; margin-top: 3px; color: #989fa2; font: 600 8px var(--body); letter-spacing: 1px; }
.delivery-brand-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 9px; background: #175d9d; }
.delivery-brand-icon img { width: 26px; height: 26px; filter: invert(1); }
.delivery-kicker { margin: 23px 0 4px; color: #96bdec; font-size: 9px; font-weight: 700; letter-spacing: 1.2px; }
.delivery-dialog h2 { margin: 0; font: 600 23px var(--display); letter-spacing: -.7px; }
.delivery-dialog h2:focus { outline: none; }
.delivery-product { margin: 5px 0 18px; color: #babfc3; font-size: 12px; }
.credential-list { overflow: hidden; border: 1px solid #41484f; border-radius: 7px; background: #282b2f; }
.credential-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; }
.credential-row + .credential-row { border-top: 1px solid #3b4148; }
.credential-row span { color: #a3aaad; font-size: 11px; }
.credential-row strong { color: #f2f2f2; font: 600 12px var(--display); }
.credential-copy { display: inline-flex; align-items: center; gap: 7px; padding: 4px 5px; border: 0; border-radius: 4px; background: transparent; color: #f2f2f2; font: 600 12px var(--display); cursor: pointer; transition: background-color .16s ease, color .16s ease; }
.credential-copy:hover { background: #3a3f46; color: #fff; }
.credential-copy img { width: 13px; height: 13px; filter: invert(1); opacity: .62; }
.delivery-done { width: 100%; height: 39px; border: 0; border-radius: 6px; background: var(--blue); color: white; font-size: 12px; font-weight: 600; cursor: pointer; transition: background-color .18s ease; }
.delivery-done:hover { background: #609cf0; }
.dialog-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 10px 12px; border-radius: 9px; background: #2a2f35; font-size: 13px; font-weight: 700; }
.dialog-summary strong { display: flex; flex: none; align-items: center; gap: 6px; color: #fff; font-size: 13px; font-weight: 800; white-space: nowrap; }
.dialog-summary strong img { width: 16px; height: 16px; filter: invert(59%) sepia(46%) saturate(1002%) hue-rotate(183deg) brightness(103%) contrast(96%); }
.dialog-actions { display: flex; gap: 9px; margin-top: 18px; }
.dialog-actions button { height: 44px; border-radius: 9px; font-size: 13px; font-weight: 700; cursor: pointer; transition: transform .16s ease, background-color .16s ease; }
.dialog-actions button:active { transform: scale(.985); }
.cancel-button { flex: 1; border: 0; background: #303740; box-shadow: inset 0 -3px 0 #242a30; color: #fff; }
.cancel-button:hover { background: #3b444e; }
.confirm-button { flex: 1.5; border: 0; background: var(--blue); box-shadow: inset 0 -3px 0 #2a5c9f; color: #fff; }
.confirm-button:hover { background: #5b9bf0; }
.toast { --toast-accent: #7cb5f6; position: fixed; z-index: 30; bottom: max(22px, env(safe-area-inset-bottom) + 16px); left: 50%; display: flex; width: max-content; max-width: min(420px, calc(100vw - 28px)); align-items: center; gap: 11px; transform: translate(-50%, 12px) scale(.98); padding: 11px 15px 11px 11px; border: 1px solid #343d45; border-radius: 12px; background: #20252a; color: #f3f5f6; opacity: 0; pointer-events: none; box-shadow: 0 16px 36px #0009, inset 0 1px 0 #ffffff0a; transition: opacity .2s ease, transform .24s cubic-bezier(.2,.8,.3,1); }
.toast.show { transform: translate(-50%, 0) scale(1); opacity: 1; }
.toast[data-tone="success"] { --toast-accent: #63dba1; }
.toast[data-tone="error"] { --toast-accent: #ff858e; }
.toast-icon { display: grid; flex: none; width: 33px; height: 33px; place-items: center; border-radius: 9px; background: #25374a; color: var(--toast-accent); }
.toast[data-tone="success"] .toast-icon { background: #21392e; }
.toast[data-tone="error"] .toast-icon { background: #3c292f; }
.toast-symbol { display: none; width: 19px; height: 19px; }
.toast[data-tone="info"] .toast-symbol-info, .toast[data-tone="success"] .toast-symbol-success, .toast[data-tone="error"] .toast-symbol-error { display: block; }
.toast-copy { display: grid; min-width: 0; gap: 3px; }
.toast-copy strong { color: var(--toast-accent); font: 800 10px/1 var(--body); letter-spacing: .07em; text-transform: uppercase; }
.toast-copy > span { color: #f3f5f6; font: 600 13px/1.35 var(--body); overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }
.confetti-canvas { position: fixed; z-index: 20; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; pointer-events: none; }

.header-action-wrap { position: relative; display: grid; place-items: center; }
.tip-trigger, .bonus-trigger { position: relative; display: grid; width: 32px; height: 32px; padding: 0; place-items: center; border: 0; border-radius: 7px; background: transparent; color: #d5d9db; cursor: pointer; transition: color .16s ease, background-color .16s ease; }
.tip-trigger img, .bonus-trigger img { width: 18px; height: 18px; filter: invert(1); opacity: .86; }
.tip-trigger:hover, .bonus-trigger:hover, .tip-trigger[aria-expanded="true"], .bonus-trigger[aria-expanded="true"] { background: #383c41; color: #fff; }
.topbar-right { gap: 10px; }
.bonus-popover .popover-heading { gap: 12px; }
.bonus-popover .popover-heading .popover-submit { flex: none; width: auto; height: 29px; margin: 0; padding: 0 12px; }
.bonus-popover > p { margin: 13px 15px 15px; color: #bbc1c4; font-size: 11px; line-height: 1.5; }
.header-popover { position: absolute; z-index: 31; top: calc(100% + 12px); right: 0; width: min(300px, calc(100vw - 28px)); overflow: hidden; border: 1px solid #454c53; border-radius: 10px; background: #2c3034; box-shadow: 0 18px 48px #0008; animation: popover-enter .16s ease-out both; }
.header-popover[hidden] { display: none; }
.wallet-popover { width: 310px; padding-bottom: 7px; }
.wallet-popover .popover-heading > span { overflow: hidden; max-width: 130px; color: #b7bdc1; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.wallet-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin: 10px 10px 0; padding: 3px; border-radius: 6px; background: #202326; }
.wallet-toggle button { height: 27px; border: 0; border-radius: 4px; background: transparent; color: #a3aaad; font-size: 10px; font-weight: 600; cursor: pointer; }
.wallet-toggle button:hover { color: #fff; }
.wallet-toggle button.active { background: #3b4047; color: #fff; }
.wallet-conversion { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 15px 0; }
.wallet-conversion strong { font: 600 13px var(--display); }
.wallet-conversion span { color: #bcc2c5; font-variant-numeric: tabular-nums; }
.popover-hint { margin: 8px 15px 12px; color: #a3aaad; font-size: 10px; }
.wallet-popover > a { display: flex; align-items: center; justify-content: space-between; margin: 0 8px; padding: 9px 8px; border-radius: 6px; color: #fff; font-size: 11px; }
.wallet-popover > a:hover { background: #393d43; }
.wallet-popover > a img { width: 14px; height: 14px; filter: invert(1); }
.profile-popover { width: 250px; }
.profile-summary { display: flex; align-items: center; gap: 10px; padding: 13px; border-bottom: 1px solid #3b4148; }
.profile-summary > img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: #3b4047; }
.profile-summary > div { display: grid; min-width: 0; gap: 2px; }
.profile-summary strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.profile-summary span { overflow: hidden; color: #a3aaad; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.profile-popover > button { display: flex; width: calc(100% - 12px); align-items: center; gap: 9px; margin: 6px; padding: 9px; border: 0; border-radius: 6px; background: transparent; color: #e2e6e8; font-size: 11px; text-align: left; cursor: pointer; }
.profile-popover > button:hover { background: #393d43; }
.profile-popover > button img { width: 15px; height: 15px; filter: invert(1); }
.tip-popover { padding-bottom: 12px; }
.tip-popover label, .username-label { display: grid; gap: 6px; margin: 12px 14px 0; color: #bbc1c4; font-size: 10px; }
.tip-popover input, .tip-popover select, .username-label input { width: 100%; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid #454c53; border-radius: 6px; background: #202326; color: #fff; font: 500 12px var(--body); }
.tip-amount-row { display: flex; gap: 7px; }
.tip-amount-row select { width: 92px; }
.tip-popover .popover-hint { margin: 7px 14px; }
.popover-submit, .username-submit { display: block; width: calc(100% - 28px); height: 36px; margin: 10px 14px 0; border: 0; border-radius: 6px; background: var(--blue); color: white; font-size: 11px; font-weight: 700; cursor: pointer; }
.popover-submit:hover, .username-submit:hover { background: #609cf0; }
.popover-submit:disabled, .username-submit:disabled { opacity: .55; cursor: wait; }
.auth-dialog, .username-dialog { position: relative; width: min(390px, calc(100vw - 30px)); padding: 32px; border: 1px solid #585f65; border-radius: 12px; background: #303438; color: var(--text); box-shadow: 0 24px 80px #0009; }
.auth-dialog::backdrop, .username-dialog::backdrop { background: #0f1113bd; backdrop-filter: blur(4px); }
.auth-dialog[open], .username-dialog[open] { animation: dialog-enter .18s ease-out both; }
.auth-dialog { text-align: center; }
.auth-dialog h2, .username-dialog h2 { margin: 4px 0 6px; font: 600 22px var(--display); letter-spacing: -.5px; }
.auth-dialog > p, .username-dialog > p { margin: 0 0 20px; color: #959b9e; font-size: 12px; line-height: 1.55; }
.google-mark { display: grid; width: 80px; height: 80px; margin: 0 auto 17px; place-items: center; }
.google-mark svg { display: block; width: 100%; height: 100%; }
.google-signin { position: relative; isolation: isolate; display: flex; min-height: 43px; align-items: center; justify-content: center; gap: 10px; overflow: hidden; border: 1px solid #5c6369; border-radius: 7px; background: #f5f5f5; color: #1e2124; font-size: 12px; font-weight: 600; transition: color .9s ease .12s, border-color .24s ease; }
.google-signin::before { position: absolute; z-index: -1; inset: 0; background: #121416; clip-path: circle(0 at 50% 50%); content: ""; transition: clip-path 1.1s cubic-bezier(.4,0,.2,1); }
.google-signin:hover, .google-signin:focus-visible { color: #fff; border-color: #5d6269; }
.google-signin:hover::before, .google-signin:focus-visible::before { clip-path: circle(155% at 50% 50%); }
.google-signin svg { width: 18px; height: 18px; }
.auth-error { margin: 12px 0 0 !important; color: #b2b8bc !important; text-align: center; }
.auth-error[hidden] { display: none; }
.username-label { margin: 0 0 15px; }
.username-dialog .username-submit { width: 100%; margin: 0; }
.username-dialog .auth-error { margin: -5px 0 12px !important; }
.notification-popover { right: -8px; }
@media (max-width: 760px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .topbar-right { gap: 4px; }
  .tip-trigger, .bonus-trigger, .notification-button { width: 29px; height: 29px; }
  .top-wallet { gap: 4px; }
  .wallet-popover, .profile-popover, .tip-popover, .bonus-popover { right: -44px; }
}

@media (max-width: 1050px) {
  .sidebar { width: 256px; }
  .brand-roll { --roll-distance: 190px; }
  .main-area { margin-left: 256px; }
  .hero { gap: 25px; }
  .page-content, .topbar { padding-right: 32px; padding-left: 32px; }
}
@media (max-width: 760px) {
  .sidebar { width: 66px; padding: 18px 9px; }
  .brand-roll { display: none; }
  .brand { display: grid; min-height: 46px; place-items: center; margin: 0 0 34px; padding: 0; }
  .brand-name, .nav-link > span { display: none; }
  .sidebar-separator { margin: 14px 10px; }
  .brand-mini { display: block; color: #4ca5ef; font: 400 17px "Bowlby One SC", Impact, sans-serif; letter-spacing: -.09em; text-shadow: 0 2px 0 #0e3e74, 0 4px 5px #0009; }
  .nav-link > .purchase-badge:not([hidden]) { position: absolute; top: 1px; right: 0; display: grid; min-width: 17px; height: 17px; margin: 0; padding: 0 3px; border: 2px solid var(--sidebar); font-size: 9px; }
  .nav-link { justify-content: center; width: 46px; height: 44px; padding: 0; }
  .nav-link img { width: 18px; height: 18px; }
  .game-list { width: 46px; }
  .main-area { margin-left: 66px; }
  .topbar { height: 58px; padding: 0 19px; }
  .breadcrumb { display: none; }
  .mobile-brand { grid-column: 1; display: flex; min-width: 0; align-items: center; gap: 8px; overflow: hidden; font: 600 12px var(--display); white-space: nowrap; }
  .mobile-brand > span:last-child { overflow: hidden; text-overflow: ellipsis; }
  .wallet-center-wrap { grid-column: 2; }
  .topbar-right { grid-column: 3; }
  .mobile-brand .brand-mark { width: 28px; height: 28px; border-radius: 50%; }
  .mobile-brand .brand-mark img { width: 28px; height: 28px; }
  .topbar-right { gap: 10px; }
  .top-wallet .credits-label { display: none; }
  .page-content { padding: 25px 20px 20px; }
  .hero { grid-template-columns: 1fr; gap: 20px; margin-bottom: 17px; }
  .hero-copy { padding: 4px 0 0; }
  .hero h1 { margin-top: 0; font-size: 43px; }
  .hero-art { min-height: 202px; }
  .notice-strip { margin-bottom: 27px; }
  .product-grid { grid-template-columns: 1fr; }
  .product-card { min-height: 475px; }
  .credit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how-list { grid-template-columns: 1fr; }
  .crossing-controls { align-items: flex-start; }
  .section-heading h2 { font-size: 20px; }
}
@media (max-width: 430px) {
  .topbar { padding: 0 13px; }
  .mobile-brand { gap: 6px; font-size: 10px; }
  .mobile-brand .brand-mark { width: 25px; height: 25px; border-radius: 50%; }
  .mobile-brand .brand-mark img { width: 25px; height: 25px; }
  .topbar-right { gap: 4px; }
  .avatar-button:not(.login-button) { width: 26px; height: 26px; }
  .top-wallet { font-size: 11px; }
  .page-content { padding: 21px 14px 18px; }
  .hero h1 { font-size: 38px; letter-spacing: -1.8px; }
  .hero-copy > p { font-size: 13px; }
  .hero-art { min-height: 185px; }
  .product-card { padding: 17px 16px; }
  .credit-grid { grid-template-columns: 1fr; }
  .order-row { align-items: flex-start; flex-wrap: wrap; }
  .order-details { min-width: 0; flex: 1 1 60%; }
  .order-value { margin-left: 0; }
  .order-open { margin-left: auto; }
  .chicken-cross-heading { align-items: flex-start; }
  .chicken-cross-heading h2 { font-size: 24px; }
  .game-score { min-width: 82px; padding: 7px 9px; }
  .crossing-card { padding: 8px; }
  .crossing-board-wrap { padding: 5px; }
  .crossing-bottomline { align-items: flex-start; flex-direction: column; gap: 4px; }
  .crossing-help span { max-width: 190px; }
  .dialog-actions { flex-direction: column-reverse; }
  .dialog-actions button { flex: auto; width: 100%; }
  .purchase-dialog .dialog-actions { flex-direction: row; }
  .purchase-dialog .dialog-actions button { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .brand-roll img { left: 50%; animation: none !important; transform: translateX(-50%); opacity: 1; }
}

.email-auth-form { display:grid;gap:14px;margin:20px 0; }
.email-auth-form label { display:grid;gap:7px;color:#b1b8bb;font-size:12px;text-align:left; }
.email-auth-form input { width:100%;box-sizing:border-box;padding:12px;border:1px solid #40474e;border-radius:7px;background:#1f2225;color:#fff;font:inherit; }
.email-auth-form button { min-height:43px;border:0;border-radius:7px;background:#4d8ee7;color:white;font-weight:600;cursor:pointer; }
.email-auth-form button:disabled { opacity:.5;cursor:wait; }
#email-auth-retry { background:transparent;color:#a3aaad;min-height:25px; }
#email-auth-status { font-size:12px;color:#9dbce6;margin:0; }
.email-auth-form [hidden] { display:none; }

#email-auth-mode { background:transparent;color:#a3aaad;min-height:28px;font-size:12px; }
.auth-dialog .google-mark { display:none; }

.google-signin[hidden] { display:none; }

/* Sidebar: navigation grouped into panels, scrolling with a slim custom bar. */
.sidebar { gap: 10px; padding-right: 6px; scrollbar-width: thin; scrollbar-color: #3a4047 transparent; scrollbar-gutter: stable; }
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { margin: 12px 0; background: transparent; }
.sidebar::-webkit-scrollbar-thumb { border-radius: 99px; background: #33393f; }
.sidebar:hover::-webkit-scrollbar-thumb { background: #434a52; }
.sidebar::-webkit-scrollbar-thumb:hover { background: #56606a; }
.sidebar .brand { margin-bottom: 25px; }
.nav-panel { flex-shrink: 0; padding: 5px; border: 1px solid #2a2f34; border-radius: 10px; background: #1f2327; }
.nav-panel.policy-nav { margin-bottom: 0; }
.nav-panel-head { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: #e7eaec; font: 600 13px var(--body); cursor: pointer; transition: background-color .18s ease; }
.nav-panel-head:hover { background: #2a2f34; }
.nav-panel-head > svg:first-child { flex: none; color: #8f979d; }
.nav-panel-chevron { flex: none; width: 22px; height: 22px; margin-left: auto; padding: 4px; border-radius: 5px; background: #2a2f34; color: #a9b0b5; transition: transform .22s ease; }
.games-panel.collapsed .nav-panel-chevron { transform: rotate(180deg); }
.games-panel .game-list { display: grid; grid-template-rows: 1fr; margin-top: 4px; padding-top: 4px; border-top: 1px solid #2a2f34; transition: grid-template-rows .25s ease, margin .25s ease, padding .25s ease, border-color .25s ease; }
.games-panel .games-list { min-height: 0; overflow: hidden; }
.games-panel.collapsed .game-list { grid-template-rows: 0fr; margin-top: 0; padding-top: 0; border-color: transparent; }
@media (max-width: 760px) {
  .sidebar { padding-right: 4px; }
  .nav-panel { padding: 0; border: 0; background: none; }
  .nav-panel-head { justify-content: center; width: 46px; padding: 0; }
  .nav-panel-head > span, .nav-panel-head > svg:first-child { display: none; }
  .nav-panel-chevron { margin: 0; }
}

/* The credit coin is drawn inline (full colour): no mono-icon filters, fixed size. */
.coin-icon { display: block; flex: none; filter: none !important; }

/* Home: arcade-style landing with promo row, live game tiles and banners. */
.home-page { display: grid; gap: 18px; }
.home-top { display: grid; grid-template-columns: minmax(0, 1.9fr) repeat(3, minmax(0, 1fr)); gap: 14px; }
.home-hero { position: relative; display: flex; align-items: center; min-height: 196px; padding: 26px 28px; overflow: hidden; border-radius: 14px; background: linear-gradient(135deg, #24476f 0%, #1c2f47 55%, #1b2330 100%); }
.home-hero-copy { position: relative; z-index: 1; max-width: 62%; }
.home-hero h1 { margin: 0; color: #fff; font: 400 28px/1.05 "Bowlby One SC", Impact, sans-serif; letter-spacing: .01em; text-shadow: 0 3px 0 #0f2744; }
.home-hero h1 span { color: #6fb6ff; }
.home-hero p { margin: 8px 0 18px; color: #a9c2dc; font-size: 13px; }
.home-hero-mark { position: absolute; right: -14px; bottom: -22px; width: 190px; height: 190px; object-fit: contain; transform: rotate(-8deg); }
.home-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.home-actions[hidden] { display: none; }
.home-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 15px; border: 0; border-radius: 8px; background: #33404f; color: #fff; font: 600 13px var(--body); cursor: pointer; transition: transform .15s ease, background-color .15s ease; }
.home-btn:hover { background: #3d4c5e; transform: translateY(-1px); }
.home-btn:active { transform: translateY(1px); }
.home-btn img { width: 16px; height: 16px; filter: invert(1); }
.home-btn-blue { background: var(--blue); box-shadow: 0 3px 0 #2a5c9f; }
.home-btn-blue:hover { background: #5b9bf0; }
.home-btn-discord { background: #5865f2; box-shadow: 0 3px 0 #3c46b5; }
.home-btn-discord:hover { background: #6a76f5; }

.home-promo { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 196px; padding: 16px; overflow: hidden; border: 0; border-radius: 14px; color: #fff; font: inherit; text-align: left; cursor: pointer; transition: transform .2s ease; }
.home-promo:hover { transform: translateY(-3px); }
.home-promo:hover .promo-art { transform: translateY(-4px) rotate(-3deg) scale(1.04); }
.promo-gold { background: linear-gradient(160deg, #3b3322, #262219); }
.promo-green { background: linear-gradient(160deg, #1f4a37, #1a2a23); }
.promo-purple { background: linear-gradient(160deg, #353a7a, #22243f); }
.promo-tag { position: absolute; top: 14px; left: 14px; padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; }
.promo-gold .promo-tag { background: #f2c14e; color: #3b2b06; }
.promo-green .promo-tag { background: #2fbf76; color: #0b2a1a; }
.promo-purple .promo-tag { background: #7d8bf5; color: #14173d; }
.promo-art { position: absolute; top: 18px; right: 6px; width: 62%; transition: transform .25s ease; }
.home-promo strong { font: 400 19px/1.1 "Bowlby One SC", Impact, sans-serif; text-shadow: 0 2px 0 #0006; }
.home-promo span:not(.promo-tag) { margin-top: 3px; color: #ffffffb3; font-size: 11.5px; line-height: 1.3; }

.home-heading { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.home-heading h2 { margin: 0; font: 700 21px var(--display); }
.home-live, .tile-count { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; }
.home-live { padding: 4px 10px; border-radius: 99px; background: #22262a; }
.home-live b, .tile-count b { color: #fff; font-variant-numeric: tabular-nums; }
.home-live i, .tile-count i { width: 7px; height: 7px; border-radius: 50%; background: #2fbf76; box-shadow: 0 0 0 3px #2fbf7626; animation: live-pulse 2s ease-in-out infinite; }
@keyframes live-pulse { 50% { box-shadow: 0 0 0 5px #2fbf7600; } }

.home-games { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; }
.game-tile { display: grid; gap: 8px; }
.tile-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; aspect-ratio: 3 / 4; padding: 12px 8px 14px; overflow: hidden; border-radius: 12px; background: radial-gradient(circle at 50% 30%, #4d95ec 0%, #3574c9 45%, #25589e 100%); transition: transform .2s ease; }
.tile-card::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(transparent, #1a447c99); pointer-events: none; }
.tile-art { position: absolute; top: 8%; left: 8%; width: 84%; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.tile-card strong { position: relative; z-index: 1; color: #fff; font: 400 clamp(16px, 1.5vw, 21px)/1 "Bowlby One SC", Impact, sans-serif; letter-spacing: -.01em; text-transform: uppercase; text-shadow: 0 3px 0 #173c6e; }
.tile-card small { position: relative; z-index: 1; margin-top: 6px; color: #bcdcff; font-size: 8.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.game-tile:hover .tile-card { transform: translateY(-4px); }
.game-tile:hover .tile-art { transform: translateY(-3px) scale(1.07) rotate(-2deg); }
.game-tile:active .tile-card { transform: translateY(-1px) scale(.98); }

.home-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

@media (max-width: 1250px) {
  .home-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-hero { grid-column: 1 / -1; }
  .home-games { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .home-top, .home-bottom { grid-template-columns: 1fr; }
  .home-promo { min-height: 150px; }
  .promo-art { width: 44%; }
  .home-hero-copy { max-width: 100%; }
  .home-hero-mark { opacity: .25; }
  .home-games { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Home v2: aligned buttons, uppercase display type, centered promo art, reward banners. */
.home-actions { display: grid; grid-template-columns: repeat(2, max-content); }
.home-actions > .home-btn-discord { grid-column: 1 / -1; justify-content: center; }
.home-btn { justify-content: center; box-shadow: 0 3px 0 #1d2630; }
.home-hero h1, .home-promo strong { text-transform: uppercase; }
.promo-art { inset: 30px 0 auto; width: 58%; margin: 0 auto; }
.home-promo:hover .promo-art { transform: translateY(-5px) scale(1.05); }
.promo-gift { width: 52%; filter: drop-shadow(0 8px 10px #0006); }
.promo-discord { width: 64%; top: 34px; }
.promo-coins { height: 110px; }
.promo-coins .pc { position: absolute; filter: drop-shadow(0 6px 8px #0005); }
.promo-coins svg { display: block; width: 100%; height: 100%; }
.pc-1 { left: 18%; top: 20px; width: 78px; height: 78px; }
.pc-2 { right: 10%; top: 0; width: 50px; height: 50px; transform: rotate(18deg); }
.pc-3 { right: 20%; top: 64px; width: 36px; height: 36px; transform: rotate(-20deg); }

.home-banner { position: relative; display: flex; align-items: center; min-height: 176px; padding: 26px 28px; overflow: hidden; border-radius: 14px; background: #1c1f23; }
.home-banner::before { content: ""; position: absolute; inset: 0 0 0 42%; pointer-events: none; }
.banner-rewards::before { background: radial-gradient(circle at 62% 50%, #f2c14e38, transparent 68%), linear-gradient(90deg, #1c1f23, #2b2618); }
.banner-free::before { background: radial-gradient(circle at 62% 50%, #4d8ee740, transparent 68%), linear-gradient(90deg, #1c1f23, #17263a); }
.banner-copy { position: relative; z-index: 1; max-width: 52%; }
.banner-copy h3 { margin: 0; color: #fff; font: 400 27px/1 "Bowlby One SC", Impact, sans-serif; text-transform: uppercase; text-shadow: 0 3px 0 #0007; }
.banner-copy h3 em { color: #6fb6ff; font-style: normal; }
.banner-copy p { margin: 10px 0 16px; color: #9ca4ab; font-size: 13px; line-height: 1.45; }
.banner-btn { display: inline-flex; align-items: center; height: 36px; padding: 0 20px; border: 0; border-radius: 8px; font: 700 13px var(--body); cursor: pointer; transition: transform .15s ease, filter .15s ease; }
.banner-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.banner-btn:active { transform: translateY(1px); }
.btn-gold { background: #f2c14e; color: #3b2b06; box-shadow: 0 3px 0 #a8801f; }
.btn-blue { background: var(--blue); color: #fff; box-shadow: 0 3px 0 #2a5c9f; }
.banner-art { position: absolute; inset: 0 0 0 48%; }
.banner-art .fl { position: absolute; filter: drop-shadow(0 8px 10px #0007); animation: float 5s ease-in-out infinite; }
.banner-art span.fl svg { display: block; width: 100%; height: 100%; }
.fl-1 { left: 30%; top: 26%; width: 96px; height: 96px; --r: -10deg; }
.fl-2 { left: 8%; top: 12%; width: 46px; height: 46px; --r: 14deg; animation-delay: -1.2s !important; opacity: .8; }
.fl-3 { right: 8%; top: 8%; width: 70px; height: 70px; --r: 12deg; animation-delay: -2.4s !important; }
.fl-4 { right: 26%; bottom: 6%; width: 40px; height: 40px; --r: -18deg; animation-delay: -3.1s !important; opacity: .75; }
.fl-5 { right: 4%; bottom: 10%; width: 58px; height: 58px; --r: 22deg; animation-delay: -.6s !important; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(var(--r)); } 50% { transform: translateY(-7px) rotate(var(--r)); } }
@media (prefers-reduced-motion: reduce) { .banner-art .fl, .home-live i, .tile-count i { animation: none; } }
@media (max-width: 760px) { .banner-copy { max-width: 70%; } .banner-art { opacity: .5; } }
.home-hero h1, .home-promo strong, .tile-card strong, .banner-copy h3 { font-kerning: none; font-variant-ligatures: none; font-feature-settings: "calt" 0, "liga" 0, "kern" 0; letter-spacing: .01em; }
.home-hero h1, .home-promo strong, .tile-card strong, .banner-copy h3 { font-family: "Lilita One", "Bowlby One SC", Impact, sans-serif; font-weight: 400; letter-spacing: .02em; }
.home-hero h1 { font-size: 34px; } .home-promo strong { font-size: 22px; } .tile-card strong { font-size: clamp(18px, 1.7vw, 24px); } .banner-copy h3 { font-size: 32px; }

/* Home v3: bigger promo art, live game art, extra gift colours. */
.promo-art { inset: 14px 0 auto; width: 76%; }
.promo-gift { width: 66%; top: 10px; }
.promo-discord { width: 82%; top: 16px; }
.promo-coins { width: 80%; top: 14px; filter: drop-shadow(0 8px 10px #0006); }
.live-art { position: absolute; display: block; }
.live-art > * { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.tile-art.live-art { top: 7%; left: 14%; width: 72%; aspect-ratio: 1; }
.game-tile[data-game="chicken-cross"] .live-art { top: 4%; left: 18%; width: 64%; }
.game-tile[data-game="wheel"] .live-art { top: 5%; left: 13%; width: 74%; }
.game-tile[data-game="wheel"] .live-art > .wh-pointer { inset: -4% auto auto 50%; width: 13% !important; height: auto !important; transform: translateX(-50%); }
.game-tile[data-game="wheel"] .live-art > .wh-frame { inset: -3%; width: 106% !important; height: 106% !important; }
.coin-pair { top: 6%; left: 6%; width: 88%; aspect-ratio: 1.15; }
.coin-pair .live-art { width: 58%; aspect-ratio: 1; filter: drop-shadow(0 6px 6px #0005); }
.cf-heads { left: 2%; bottom: 0; }
.cf-tails { right: 2%; top: 0; width: 46% !important; transform: rotate(12deg); }
.fl-6 { left: 4%; bottom: 8%; width: 58px; --r: -14deg; animation-delay: -1.8s !important; }
.fl-7 { right: 30%; top: 4%; width: 50px; --r: 16deg; animation-delay: -4s !important; }
.gift-gold { filter: hue-rotate(40deg) saturate(1.4) brightness(1.1) drop-shadow(0 8px 10px #0007) !important; }
.gift-blue { filter: hue-rotate(200deg) saturate(1.2) drop-shadow(0 8px 10px #0007) !important; }
.game-tile[data-game="chicken-cross"] .live-art { top: -6%; left: 27%; width: 46%; aspect-ratio: 136 / 300; }
.game-tile[data-game="chicken-cross"] .live-art { top: 6%; left: 14%; width: 72%; aspect-ratio: 1; }
.home-promo span:not(.promo-tag) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.promo-coins { width: 84%; top: 22px; }
.home-promo strong { white-space: nowrap; font-size: clamp(17px, 1.45vw, 22px); }
.promo-coins { width: 100%; top: 10px; }
.promo-coins { width: 54%; top: 16px; }
/* Promo art: one shared box above the title, every icon centred in it at the same size. */
.home-promo .promo-art { inset: 20px 0 74px; top: 20px; width: 100%; height: auto; margin: 0; object-fit: contain; transform-origin: center; }
.home-promo .promo-gift { inset: 8px 0 66px; }
.home-promo .promo-coins { inset: 26px 0 80px; }
.home-promo .promo-discord { inset: 18px 0 70px; }
.home-promo .promo-art { inset: 6px 0 64px; width: auto; max-width: 84%; height: clamp(96px, 44%, 132px); margin: auto; }
.home-promo .promo-gift { height: clamp(104px, 48%, 144px); }
.home-promo .promo-coins { height: clamp(88px, 40%, 118px); }
.home-promo .promo-discord { height: clamp(90px, 40%, 120px); }

/* Sidebar v4 (Rainbet-style): muted mono icons, blue active row, collapsible section cards. */
.sidebar { gap: 0; }
.sidebar .brand { min-height: 0; margin: 14px 0 22px; padding: 0; }
.brand-name strong { font-size: 31px; }
.brand-name span { font-size: 27px; }
.brand-die { display: inline-block; width: .8em; height: .8em; margin: 0 .03em; vertical-align: -.02em; transform: rotate(-12deg); animation: die-wobble 4s ease-in-out infinite; }
.brand-die svg { display: block; width: 100%; height: 100%; overflow: visible; }
@keyframes die-wobble { 0%, 80%, 100% { transform: rotate(-12deg); } 86% { transform: rotate(8deg) scale(1.08); } 92% { transform: rotate(-18deg); } }
@media (prefers-reduced-motion: reduce) { .brand-die { animation: none; } }

.nav-group { display: grid; gap: 2px; }
.nav-divider { flex: none; height: 1px; margin: 12px 2px; background: #2a2f35; }
.sidebar .nav-link { gap: 12px; min-height: 40px; padding: 0 12px; border: 1px solid transparent; border-radius: 8px; color: #e6e9ec; font-size: 14px; font-weight: 600; }
.sidebar .nav-link .nav-ico { flex: none; width: 18px; height: 18px; color: #858e97; transition: color .15s ease; }
.sidebar .nav-link .nav-coin { flex: none; width: 18px; height: 18px; }
.sidebar .nav-link:hover { background: #22272c; }
.sidebar .nav-link:hover .nav-ico { color: #c3c9ce; }
.sidebar .nav-link.active { border-color: #2f5487; background: #1e2e45; color: #6fb0ff; box-shadow: none; }
.sidebar .nav-link.active .nav-ico { color: #6fb0ff; }

.nav-section { flex-shrink: 0; margin-bottom: 8px; border: 1px solid #2a2f35; border-radius: 10px; background: #1f2327; }
.nav-section-head { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 8px 0 12px; border: 0; border-radius: 10px; background: transparent; color: #e6e9ec; font: 600 14px var(--body); cursor: pointer; }
.nav-section-head .nav-ico { flex: none; width: 18px; height: 18px; color: #858e97; }
.nav-chevron { display: grid; place-items: center; width: 26px; height: 26px; margin-left: auto; border: 1px solid #3a4148; border-radius: 6px; background: #2a2f35; color: #aab1b7; transition: background-color .15s ease; }
.nav-section-head:hover .nav-chevron { background: #333940; color: #fff; }
.nav-chevron svg { transform: rotate(180deg); transition: transform .22s ease; }
.nav-section.collapsed .nav-chevron svg { transform: none; }
.nav-section-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .25s ease; }
.nav-section-body > div { display: grid; gap: 2px; min-height: 0; overflow: hidden; padding: 0 6px 6px; }
.nav-section.collapsed .nav-section-body { grid-template-rows: 0fr; }
.nav-section.collapsed .nav-section-body > div { padding-bottom: 0; }
.nav-section .nav-link { padding: 0 8px; }

@media (max-width: 1050px) { .brand-name strong { font-size: 27px; } .brand-name span { font-size: 23px; } }
@media (max-width: 760px) {
  .sidebar .nav-link { justify-content: center; padding: 0; }
  .nav-section { border: 0; background: none; }
  .nav-section-head { justify-content: center; padding: 0; }
  .nav-section-head > span:not(.nav-chevron), .nav-section-head .nav-ico { display: none; }
  .nav-chevron { margin: 0; }
}
.sidebar .brand { margin: 30px 0 26px; }

/* Sidebar active row: quiet and solid. */
.sidebar .nav-link.active { border-color: transparent; background: #2b3036; color: #fff; }
.sidebar .nav-link.active .nav-ico { color: #fff; }

/* Home: account packs. */
.home-heading { justify-content: flex-start; }
.home-more { margin-left: auto; color: var(--muted); font-size: 13px; font-weight: 600; transition: color .15s ease; }
.home-more:hover { color: #fff; }
.home-accounts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.acc-card { display: grid; grid-template-columns: 170px minmax(0, 1fr); overflow: hidden; border-radius: 14px; background: #1f2327; transition: transform .2s ease; }
.acc-card:hover { transform: translateY(-3px); }
.acc-card:hover .acc-art img { transform: translateY(-4px) rotate(-4deg) scale(1.05); }
.acc-art { position: relative; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, #33506f, #243447 70%); }
.acc-featured .acc-art { background: radial-gradient(circle at 50% 45%, #4a3a63, #2d2640 70%); }
.acc-art img { width: 112px; filter: drop-shadow(0 10px 12px #0007); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.acc-ribbon { position: absolute; top: 12px; left: 12px; padding: 4px 9px; border-radius: 6px; background: #f2c14e; color: #3b2b06; font-size: 11px; font-weight: 700; }
.acc-body { display: flex; flex-direction: column; padding: 20px 22px; }
.acc-body h3 { margin: 0; color: #fff; font: 400 22px/1.1 "Lilita One", sans-serif; letter-spacing: .01em; }
.acc-body p { margin: 6px 0 14px; color: #9ca4ab; font-size: 13px; line-height: 1.45; }
.acc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; }
.acc-chips li { padding: 5px 9px; border-radius: 6px; background: #2a2f35; color: #aab1b7; font-size: 12px; }
.acc-chips b { margin-right: 5px; color: #fff; }
.acc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.acc-price strong { display: block; color: #fff; font: 700 22px/1 var(--display); }
.acc-price span { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; color: var(--muted); font-size: 12px; }
.acc-coin { width: 14px; height: 14px; }
.acc-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: 8px; background: var(--blue); box-shadow: 0 3px 0 #2a5c9f; color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; }
.acc-btn svg { width: 15px; height: 15px; transition: transform .15s ease; }
.acc-card:hover .acc-btn svg { transform: translateX(3px); }
@media (max-width: 1250px) { .home-accounts { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .acc-card { grid-template-columns: 1fr; } .acc-art { padding: 18px 0; } }

/* Account cards: marketplace sheen on the button, richer "Most popular" ribbon. */
.acc-btn { position: relative; overflow: hidden; }
.acc-btn::before { position: absolute; top: -42%; bottom: -42%; left: -28%; width: 23%; background: linear-gradient(90deg, transparent, #fff2 36%, #fff7 50%, #fff2 64%, transparent); content: ""; pointer-events: none; transform: skewX(-23deg) translateX(-180%); }
.acc-card:hover .acc-btn::before { animation: button-sheen 2s ease-in-out infinite; }
.acc-card:hover .acc-btn { background: #5b9bf0; }
.acc-ribbon { display: inline-flex; align-items: center; gap: 5px; top: 12px; left: 12px; padding: 5px 10px 5px 8px; border-radius: 999px; background: linear-gradient(180deg, #ffd978, #f2b632); box-shadow: 0 2px 0 #a8801f, 0 6px 14px #f2b63240; color: #4a3100; font-size: 11px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.acc-ribbon svg { width: 12px; height: 12px; }

.acc-ribbon { left: 50%; transform: translateX(-50%); white-space: nowrap; }

/* Game tiles: per-game hover animations (only the animated parts get a transform origin). */
/* Roulette: pockets spin one way, ball races the other way and drops into a pocket. */
.game-tile[data-game="roulette"] .live-art > svg > g:first-of-type { transform-box: view-box; transform-origin: 200px 200px; }
.game-tile[data-game="roulette"] .live-art > svg > circle:nth-of-type(4),
.game-tile[data-game="roulette"] .live-art > svg > g:last-of-type { transform-box: view-box; transform-origin: 0 0; transform: translate(200px, 200px) rotate(-35deg) translate(0, -168px) scale(2.4); }
.game-tile[data-game="roulette"]:hover .live-art > svg > g:first-of-type { animation: rl-pockets 3.2s cubic-bezier(.33, 1, .68, 1) forwards; }
.game-tile[data-game="roulette"]:hover .live-art > svg > circle:nth-of-type(4),
.game-tile[data-game="roulette"]:hover .live-art > svg > g:last-of-type { animation: rl-ball 3.2s linear forwards; }
@keyframes rl-pockets { to { transform: rotate(540deg); } }
@keyframes rl-ball {
  0.0% { transform: translate(200px, 200px) rotate(-35.0deg) translate(0, -168.0px) scale(2.4); }
  2.5% { transform: translate(200px, 200px) rotate(-98.3deg) translate(0, -168.0px) scale(2.4); }
  5.0% { transform: translate(200px, 200px) rotate(-158.4deg) translate(0, -168.0px) scale(2.4); }
  7.5% { transform: translate(200px, 200px) rotate(-215.4deg) translate(0, -168.0px) scale(2.4); }
  10.0% { transform: translate(200px, 200px) rotate(-269.4deg) translate(0, -168.0px) scale(2.4); }
  12.5% { transform: translate(200px, 200px) rotate(-320.5deg) translate(0, -168.0px) scale(2.4); }
  15.0% { transform: translate(200px, 200px) rotate(-368.8deg) translate(0, -168.0px) scale(2.4); }
  17.5% { transform: translate(200px, 200px) rotate(-414.3deg) translate(0, -168.0px) scale(2.4); }
  20.0% { transform: translate(200px, 200px) rotate(-457.1deg) translate(0, -168.0px) scale(2.4); }
  22.5% { transform: translate(200px, 200px) rotate(-497.4deg) translate(0, -168.0px) scale(2.4); }
  25.0% { transform: translate(200px, 200px) rotate(-535.1deg) translate(0, -168.0px) scale(2.4); }
  27.5% { transform: translate(200px, 200px) rotate(-570.4deg) translate(0, -168.0px) scale(2.4); }
  30.0% { transform: translate(200px, 200px) rotate(-603.3deg) translate(0, -168.0px) scale(2.4); }
  32.5% { transform: translate(200px, 200px) rotate(-634.0deg) translate(0, -168.0px) scale(2.4); }
  35.0% { transform: translate(200px, 200px) rotate(-662.4deg) translate(0, -168.0px) scale(2.4); }
  37.5% { transform: translate(200px, 200px) rotate(-688.8deg) translate(0, -168.0px) scale(2.4); }
  40.0% { transform: translate(200px, 200px) rotate(-713.2deg) translate(0, -168.0px) scale(2.4); }
  42.5% { transform: translate(200px, 200px) rotate(-735.6deg) translate(0, -168.0px) scale(2.4); }
  45.0% { transform: translate(200px, 200px) rotate(-756.1deg) translate(0, -168.0px) scale(2.4); }
  47.5% { transform: translate(200px, 200px) rotate(-774.8deg) translate(0, -168.0px) scale(2.4); }
  50.0% { transform: translate(200px, 200px) rotate(-791.9deg) translate(0, -168.0px) scale(2.4); }
  52.5% { transform: translate(200px, 200px) rotate(-807.3deg) translate(0, -168.0px) scale(2.4); }
  55.0% { transform: translate(200px, 200px) rotate(-821.2deg) translate(0, -168.0px) scale(2.4); }
  57.5% { transform: translate(200px, 200px) rotate(-833.6deg) translate(0, -168.0px) scale(2.4); }
  60.0% { transform: translate(200px, 200px) rotate(-844.6deg) translate(0, -168.0px) scale(2.4); }
  62.5% { transform: translate(200px, 200px) rotate(-854.4deg) translate(0, -168.0px) scale(2.4); }
  65.0% { transform: translate(200px, 200px) rotate(-862.9deg) translate(0, -168.0px) scale(2.4); }
  67.5% { transform: translate(200px, 200px) rotate(-870.3deg) translate(0, -168.0px) scale(2.4); }
  70.0% { transform: translate(200px, 200px) rotate(-876.6deg) translate(0, -168.0px) scale(2.4); }
  72.5% { transform: translate(200px, 200px) rotate(-882.0deg) translate(0, -167.9px) scale(2.4); }
  75.0% { transform: translate(200px, 200px) rotate(-886.5deg) translate(0, -165.8px) scale(2.4); }
  77.5% { transform: translate(200px, 200px) rotate(-890.1deg) translate(0, -161.3px) scale(2.4); }
  80.0% { transform: translate(200px, 200px) rotate(-893.1deg) translate(0, -155.3px) scale(2.4); }
  82.5% { transform: translate(200px, 200px) rotate(-895.4deg) translate(0, -148.7px) scale(2.4); }
  85.0% { transform: translate(200px, 200px) rotate(-897.1deg) translate(0, -142.1px) scale(2.4); }
  87.5% { transform: translate(200px, 200px) rotate(-898.3deg) translate(0, -136.6px) scale(2.4); }
  90.0% { transform: translate(200px, 200px) rotate(-899.1deg) translate(0, -133.0px) scale(2.4); }
  92.5% { transform: translate(200px, 200px) rotate(-899.6deg) translate(0, -132.0px) scale(2.4); }
  95.0% { transform: translate(200px, 200px) rotate(-899.9deg) translate(0, -132.0px) scale(2.4); }
  97.5% { transform: translate(200px, 200px) rotate(-900.0deg) translate(0, -132.0px) scale(2.4); }
  100.0% { transform: translate(200px, 200px) rotate(-900.0deg) translate(0, -132.0px) scale(2.4); }
}
/* Chicken: the cash-out dance from Chicken Cross (1s loop: sway 4 degrees each way, dip twice). */
.game-tile[data-game="chicken-cross"] .live-art > svg { transform-origin: 50% 92%; }
.game-tile[data-game="chicken-cross"]:hover .live-art > svg { animation: chicken-dance 1s ease-in-out infinite; }
@keyframes chicken-dance {
  0%, 50%, 100% { transform: rotate(0) translateY(0) scale(1, 1); }
  25% { transform: rotate(-4deg) translateY(3%) scale(1.03, .96); }
  75% { transform: rotate(4deg) translateY(3%) scale(1.03, .96); }
}
/* Towers: coins pop up one after another, bomb rattles. */
.game-tile[data-game="tower"] .tile-art use, .game-tile[data-game="tower"] .tile-art rect[fill="#a8222a"] { transform-box: fill-box; transform-origin: center; }
.game-tile[data-game="tower"]:hover .tile-art use { animation: tw-coin 1.2s cubic-bezier(.3, 1.6, .5, 1) infinite; }
.game-tile[data-game="tower"]:hover .tile-art use:nth-of-type(2) { animation-delay: .2s; }
.game-tile[data-game="tower"]:hover .tile-art use:nth-of-type(3) { animation-delay: .4s; }
.game-tile[data-game="tower"]:hover .tile-art rect[fill="#a8222a"] { animation: tw-rattle .4s ease-in-out infinite; }
@keyframes tw-coin { 0%, 55%, 100% { transform: translateY(0); } 22% { transform: translateY(-7px); } 40% { transform: translateY(1px); } }
@keyframes tw-rattle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
/* Coinflip: heads coin tosses and flips, tails coin bobs. */
.game-tile[data-game="coin-flip"]:hover .cf-heads { animation: cf-toss 1.4s cubic-bezier(.45, 0, .55, 1) infinite; }
.game-tile[data-game="coin-flip"]:hover .cf-tails { animation: cf-bob 1.4s ease-in-out infinite; }
@keyframes cf-toss { 0% { transform: perspective(240px) translateY(0) rotateY(0); } 50% { transform: perspective(240px) translateY(-24%) rotateY(360deg); } 100% { transform: perspective(240px) translateY(0) rotateY(720deg); } }
@keyframes cf-bob { 0%, 100% { transform: rotate(12deg) translateY(0); } 50% { transform: rotate(-4deg) translateY(-8%); } }
/* Wheel: disc spins under a ticking pointer. */
.game-tile[data-game="wheel"] .live-art > .wh-disc { transform-origin: center; }
.game-tile[data-game="wheel"]:hover .live-art > .wh-disc { animation: wh-spin 2.4s cubic-bezier(.15, .6, .25, 1) forwards; }
.game-tile[data-game="wheel"]:hover .live-art > .wh-pointer { animation: wh-tick .14s ease-in-out 10; }
@keyframes wh-spin { to { transform: rotate(900deg); } }
@keyframes wh-tick { 50% { transform: translateX(-50%) rotate(-14deg); } }
/* Double: a long strip rolls past the marker and settles. */
.game-tile[data-game="double"]:hover .dbl-strip { animation: dbl-roll 2.8s cubic-bezier(.12, .6, .2, 1) forwards; }
@keyframes dbl-roll { to { transform: translateX(-360px); } }
/* Crash: the line climbs slowly, holds, then fades out and restarts (no snap back). */
.game-tile[data-game="crash"] .tile-art circle, .game-tile[data-game="crash"] .tile-art text { transform-box: fill-box; transform-origin: center; }
.game-tile[data-game="crash"]:hover .tile-art path[stroke="#4f9cff"] { stroke-dasharray: 130; animation: cr-line 4.2s ease-in-out infinite; }
.game-tile[data-game="crash"]:hover .tile-art path[opacity] { animation: cr-fade 4.2s ease-in-out infinite; }
.game-tile[data-game="crash"]:hover .tile-art circle, .game-tile[data-game="crash"]:hover .tile-art text { animation: cr-pop 4.2s ease-in-out infinite; }
@keyframes cr-line { 0% { stroke-dashoffset: 0; opacity: 1; } 14% { stroke-dashoffset: 0; opacity: 0; } 15% { stroke-dashoffset: 130; opacity: 0; } 20% { opacity: 1; } 72%, 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes cr-fade { 0% { opacity: .22; } 14%, 30% { opacity: 0; } 72%, 100% { opacity: .22; } }
@keyframes cr-pop { 0% { transform: scale(1); opacity: 1; } 12% { transform: scale(.8); opacity: 0; } 62% { transform: scale(.5); opacity: 0; } 72% { transform: scale(1.2); opacity: 1; } 80%, 100% { transform: scale(1); opacity: 1; } }
.game-tile:is([data-game="roulette"], [data-game="wheel"], [data-game="coin-flip"], [data-game="chicken-cross"], [data-game="double"], [data-game="mines"], [data-game="plinko"]):hover .tile-art { transform: none; }

/* Mines: tiles open one after another (coins pop, then the bomb), on a loop. */
.game-tile[data-game="mines"] .mn-rev { transform-box: fill-box; transform-origin: center; }
.game-tile[data-game="mines"]:hover .mn-rev { animation: mn-open 4.4s cubic-bezier(.3, 1.5, .5, 1) infinite; animation-delay: calc(var(--i) * .5s); }
.game-tile[data-game="mines"]:hover .mn-bomb { animation-name: mn-open-bomb; }
.game-tile[data-game="mines"] .mn-cell { transform-box: fill-box; transform-origin: center; }
.game-tile[data-game="mines"]:hover .mn-cell:nth-child(n + 3) { }
@keyframes mn-open { 0% { transform: scale(0); opacity: 0; } 6% { transform: scale(1.15); opacity: 1; } 10%, 82% { transform: scale(1); opacity: 1; } 92%, 100% { transform: scale(0); opacity: 0; } }
@keyframes mn-open-bomb { 0% { transform: scale(0) rotate(0); opacity: 0; } 6% { transform: scale(1.2) rotate(0); opacity: 1; } 10% { transform: scale(1) rotate(-6deg); } 13% { transform: rotate(6deg); } 16% { transform: rotate(-5deg); } 19%, 82% { transform: scale(1) rotate(0); opacity: 1; } 92%, 100% { transform: scale(0); opacity: 0; } }

/* Plinko: balls drop through the pins on a loop while you hover. Each ball finishes its drop after you move away (see app.js). */
.game-tile[data-game="plinko"] .pk-ball { opacity: 0; transform-box: view-box; transform: translate(60px, 3px); }
.game-tile[data-game="plinko"] .pk-ball.pk-run { animation-duration: 2.8s; animation-iteration-count: infinite; }
.game-tile[data-game="plinko"] .pk-ball.a.pk-run { animation-name: pk-drop-a; }
.game-tile[data-game="plinko"] .pk-ball.b.pk-run { animation-name: pk-drop-b; animation-delay: .9s; }
.game-tile[data-game="plinko"] .pk-ball.c.pk-run { animation-name: pk-drop-c; animation-delay: 1.8s; }
.game-tile[data-game="plinko"] .pk-slot { transform-box: fill-box; transform-origin: center; }
.game-tile[data-game="plinko"].pk-active .pk-slot[style*="--k:3"] { animation: pk-bump 2.8s ease-out infinite; }
.game-tile[data-game="plinko"].pk-active .pk-slot[style*="--k:1"] { animation: pk-bump 2.8s ease-out infinite; animation-delay: .9s; }
.game-tile[data-game="plinko"].pk-active .pk-slot[style*="--k:4"] { animation: pk-bump 2.8s ease-out infinite; animation-delay: 1.8s; }
@keyframes pk-bump { 0%, 82% { transform: translateY(0); } 88% { transform: translateY(2.5px); } 96%, 100% { transform: translateY(0); } }

@keyframes pk-drop-a {
  0.0% { transform: translate(60px, -2px); opacity: 0; animation-timing-function: cubic-bezier(.55,0,.85,.4); }
  6.0% { transform: translate(60px, 12px); opacity: 1; animation-timing-function: cubic-bezier(.25,.75,.45,1); }
  12.0% { transform: translate(63.25px, 7px); opacity: 1; animation-timing-function: cubic-bezier(.55,0,.85,.4); }
  18.0% { transform: translate(66.5px, 22px); opacity: 1; animation-timing-function: cubic-bezier(.25,.75,.45,1); }
  24.0% { transform: translate(63.25px, 17px); opacity: 1; animation-timing-function: cubic-bezier(.55,0,.85,.4); }
  30.0% { transform: translate(60px, 32px); opacity: 1; animation-timing-function: cubic-bezier(.25,.75,.45,1); }
  36.0% { transform: translate(63.25px, 27px); opacity: 1; animation-timing-function: cubic-bezier(.55,0,.85,.4); }
  42.0% { transform: translate(66.5px, 42px); opacity: 1; animation-timing-function: cubic-bezier(.25,.75,.45,1); }
  48.0% { transform: translate(69.75px, 37px); opacity: 1; animation-timing-function: cubic-bezier(.55,0,.85,.4); }
  54.0% { transform: translate(73px, 52px); opacity: 1; animation-timing-function: cubic-bezier(.25,.75,.45,1); }
  60.0% { transform: translate(69.75px, 47px); opacity: 1; animation-timing-function: cubic-bezier(.55,0,.85,.4); }
  66.0% { transform: translate(66.5px, 62px); opacity: 1; animation-timing-function: cubic-bezier(.25,.75,.45,1); }
  72.0% { transform: translate(66.5px, 66px); opacity: 1; animation-timing-function: cubic-bezier(.55,0,.85,.4); }
  78.0% { transform: translate(66.5px, 72px); opacity: 1; animation-timing-function: cubic-bezier(.25,.75,.45,1); }
  84.0% { transform: translate(66.5px, 69px); opacity: 1; animation-timing-function: cubic-bezier(.55,0,.85,.4); }
  90.0% { transform: translate(66.5px, 72px); opacity: 1; animation-timing-function: linear; }
  96% { transform: translate(66.5px, 72px); opacity: 1; }
  100% { transform: translate(66.5px, 72px); opacity: 0; }
}
@keyframes pk-drop-b {
  0.0% { transform: translate(60px, -2px); opacity: 0; animation-timing-function: cubic-bezier(.55,0,.85,.4); }
  6.0% { transform: translate(60px, 12px); opacity: 1; animation-timing-function: cubic-bezier(.25,.75,.45,1); }
  12.0% { transform: translate(56.75px, 7px); opacity: 1; animation-timing-function: cubic-bezier(.55,0,.85,.4); }
  18.0% { transform: translate(53.5px, 22px); opacity: 1; animation-timing-function: cubic-bezier(.25,.75,.45,1); }
  24.0% { transform: translate(50.25px, 17px); opacity: 1; animation-timing-function: cubic-bezier(.55,0,.85,.4); }
  30.0% { transform: translate(47px, 32px); opacity: 1; animation-timing-function: cubic-bezier(.25,.75,.45,1); }
  36.0% { transform: translate(50.25px, 27px); opacity: 1; animation-timing-function: cubic-bezier(.55,0,.85,.4); }
  42.0% { transform: translate(53.5px, 42px); opacity: 1; animation-timing-function: cubic-bezier(.25,.75,.45,1); }
  48.0% { transform: translate(50.25px, 37px); opacity: 1; animation-timing-function: cubic-bezier(.55,0,.85,.4); }
  54.0% { transform: translate(47px, 52px); opacity: 1; animation-timing-function: cubic-bezier(.25,.75,.45,1); }
  60.0% { transform: translate(43.75px, 47px); opacity: 1; animation-timing-function: cubic-bezier(.55,0,.85,.4); }
  66.0% { transform: translate(40.5px, 62px); opacity: 1; animation-timing-function: cubic-bezier(.25,.75,.45,1); }
  72.0% { transform: translate(40.5px, 66px); opacity: 1; animation-timing-function: cubic-bezier(.55,0,.85,.4); }
  78.0% { transform: translate(40.5px, 72px); opacity: 1; animation-timing-function: cubic-bezier(.25,.75,.45,1); }
  84.0% { transform: translate(40.5px, 69px); opacity: 1; animation-timing-function: cubic-bezier(.55,0,.85,.4); }
  90.0% { transform: translate(40.5px, 72px); opacity: 1; animation-timing-function: linear; }
  96% { transform: translate(40.5px, 72px); opacity: 1; }
  100% { transform: translate(40.5px, 72px); opacity: 0; }
}
@keyframes pk-drop-c {
  0.0% { transform: translate(60px, -2px); opacity: 0; animation-timing-function: cubic-bezier(.55,0,.85,.4); }
  6.0% { transform: translate(60px, 12px); opacity: 1; animation-timing-function: cubic-bezier(.25,.75,.45,1); }
  12.0% { transform: translate(63.25px, 7px); opacity: 1; animation-timing-function: cubic-bezier(.55,0,.85,.4); }
  18.0% { transform: translate(66.5px, 22px); opacity: 1; animation-timing-function: cubic-bezier(.25,.75,.45,1); }
  24.0% { transform: translate(69.75px, 17px); opacity: 1; animation-timing-function: cubic-bezier(.55,0,.85,.4); }
  30.0% { transform: translate(73px, 32px); opacity: 1; animation-timing-function: cubic-bezier(.25,.75,.45,1); }
  36.0% { transform: translate(69.75px, 27px); opacity: 1; animation-timing-function: cubic-bezier(.55,0,.85,.4); }
  42.0% { transform: translate(66.5px, 42px); opacity: 1; animation-timing-function: cubic-bezier(.25,.75,.45,1); }
  48.0% { transform: translate(69.75px, 37px); opacity: 1; animation-timing-function: cubic-bezier(.55,0,.85,.4); }
  54.0% { transform: translate(73px, 52px); opacity: 1; animation-timing-function: cubic-bezier(.25,.75,.45,1); }
  60.0% { transform: translate(76.25px, 47px); opacity: 1; animation-timing-function: cubic-bezier(.55,0,.85,.4); }
  66.0% { transform: translate(79.5px, 62px); opacity: 1; animation-timing-function: cubic-bezier(.25,.75,.45,1); }
  72.0% { transform: translate(79.5px, 66px); opacity: 1; animation-timing-function: cubic-bezier(.55,0,.85,.4); }
  78.0% { transform: translate(79.5px, 72px); opacity: 1; animation-timing-function: cubic-bezier(.25,.75,.45,1); }
  84.0% { transform: translate(79.5px, 69px); opacity: 1; animation-timing-function: cubic-bezier(.55,0,.85,.4); }
  90.0% { transform: translate(79.5px, 72px); opacity: 1; animation-timing-function: linear; }
  96% { transform: translate(79.5px, 72px); opacity: 1; }
  100% { transform: translate(79.5px, 72px); opacity: 0; }
}

/* Halloween Smash: a limited-time badge, and on hover the hammer swings and the puck shoots up to ring the pumpkin. */
.tile-card { position: relative; }
.tile-badge { position: absolute; top: 9px; left: 9px; z-index: 2; padding: 4px 8px; border-radius: 999px; background: #f2803c; color: #2a1408; font: 800 9px/1 "DM Sans", sans-serif; letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 2px 0 #8f4a1e; }
.nav-badge { margin-left: auto; padding: 2px 6px; border-radius: 999px; background: #f2803c; color: #2a1408; font: 800 9px/1.2 "DM Sans", sans-serif; font-style: normal; letter-spacing: .03em; text-transform: uppercase; }
.game-tile[data-game="halloween-smash"] .tile-art g { transform-box: fill-box; transform-origin: center; }
.game-tile[data-game="halloween-smash"] .sm-t-hammer { transform: rotate(8deg); transform-origin: 92px 90px; transform-box: view-box; }
.game-tile[data-game="halloween-smash"]:hover .sm-t-hammer { animation: sm-t-swing 2.6s ease-in-out infinite; }
@keyframes sm-t-swing { 0%, 8% { transform: rotate(8deg); } 22% { transform: rotate(22deg); } 34% { transform: rotate(-64deg); } 46% { transform: rotate(-56deg); } 74%, 100% { transform: rotate(8deg); } }
@keyframes sm-t-ring { 0%, 32% { transform: scale(1); } 36% { transform: scale(1.14, .74); } 46% { transform: scale(.96, 1.06); } 58%, 100% { transform: scale(1); } }
@keyframes sm-t-spark { 0%, 33% { transform: translate(0, 0) scale(0); opacity: 0; } 38% { opacity: 1; } 70%, 100% { transform: translate(var(--sx), var(--sy)) scale(1); opacity: 0; } }
@keyframes sm-t-glow { 0%, 100% { filter: brightness(1); } 40% { filter: brightness(1.25) drop-shadow(0 0 5px #ffb23e); } }
.game-tile[data-game="halloween-smash"] .sm-t-sparks circle { opacity: 0; transform-box: fill-box; transform-origin: center; }
.game-tile[data-game="halloween-smash"] .sm-t-sparks circle:nth-child(1) { --sx: -2px; --sy: -30px; }
.game-tile[data-game="halloween-smash"] .sm-t-sparks circle:nth-child(2) { --sx: -26px; --sy: -18px; }
.game-tile[data-game="halloween-smash"] .sm-t-sparks circle:nth-child(3) { --sx: 26px; --sy: -20px; }
.game-tile[data-game="halloween-smash"] .sm-t-sparks circle:nth-child(4) { --sx: 12px; --sy: -36px; }
.game-tile[data-game="halloween-smash"]:hover .sm-t-sparks circle { animation: sm-t-spark 2.6s ease-out infinite; }
.game-tile[data-game="halloween-smash"]:hover .sm-t-pumpkin { animation: sm-t-ring 2.6s ease-out infinite, sm-t-glow 2.6s ease-in-out infinite; }
.game-tile[data-game="tower"] .tw-bomb { transform-box: fill-box; transform-origin: center; }
.game-tile[data-game="tower"]:hover .tw-bomb { animation: tw-rattle .35s ease-in-out infinite; }
.game-tile:is([data-game="halloween-smash"]):hover .tile-art { transform: none; }
@media (prefers-reduced-motion: reduce) { .game-tile[data-game="halloween-smash"] .tile-art g { animation: none !important; } }
@media (prefers-reduced-motion: reduce) { .game-tile[data-game="plinko"] .pk-ball, .game-tile[data-game="plinko"] .pk-slot { animation: none !important; }
  .game-tile:hover .tile-art, .game-tile:hover .tile-art *, .game-tile:hover .live-art, .game-tile:hover .live-art > * { animation: none !important; } }

/* Header v2: taller bar, page title, wallet pill with Add button, chunky icon buttons. */
.topbar { height: 74px; border-bottom: 1px solid #262a2f; background: linear-gradient(180deg, #1c1f23, #191c1f); box-shadow: 0 6px 18px #0004; }
.breadcrumb { gap: 8px; font-size: 13px; }
.breadcrumb > span:first-child, .crumb-slash { color: #6f777e; font-weight: 600; }
.breadcrumb span:last-child { color: #fff; font: 400 21px/1 "Lilita One", sans-serif; letter-spacing: .02em; }
.wallet-center-wrap { display: flex; align-items: center; }
.top-wallet { min-height: 44px; gap: 9px; padding: 0 16px 0 12px; border: 1px solid #2d333a; border-right: 0; border-radius: 11px 0 0 11px; background: #121417; font: 700 15px var(--display); box-shadow: inset 0 2px 0 #0000004d; }
.top-wallet:hover, .top-wallet[aria-expanded="true"] { border-color: #3a424b; background: #16191c; }
.top-wallet .wallet-icon { width: 21px; height: 21px; }
.wallet-add { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px; border-radius: 0 11px 11px 0; background: var(--blue); box-shadow: inset 0 -3px 0 #2a5c9f; color: #fff; font: 700 14px var(--body); transition: filter .15s ease; }
.wallet-add svg { width: 15px; height: 15px; }
.wallet-add:hover { filter: brightness(1.1); }
.topbar-right { gap: 8px; }
.tip-trigger, .bonus-trigger, .discord-link, .notification-button { width: 42px; height: 42px; border-radius: 11px; background: #22272c; box-shadow: inset 0 -2px 0 #0000004d; }
.tip-trigger:hover, .bonus-trigger:hover, .discord-link:hover, .notification-button:hover, .tip-trigger[aria-expanded="true"], .bonus-trigger[aria-expanded="true"], .notification-button[aria-expanded="true"] { background: #2d333a; transform: none; }
.tip-trigger img, .bonus-trigger img, .discord-link img, .notification-button img { width: 19px; height: 19px; opacity: .8; }
.avatar-button { width: 42px; height: 42px; border: 2px solid #3a424b; }
.avatar-button.login-button { height: 42px; min-width: 96px; margin-left: 4px; padding: 0 20px; border-radius: 11px; box-shadow: inset 0 -3px 0 #2a5c9f; font: 700 14px var(--body); }
@media (max-width: 1050px) { .wallet-add span { display: none; } .wallet-add { padding: 0 13px; } }
@media (max-width: 760px) { .topbar { height: 64px; } .breadcrumb span:last-child { font-size: 17px; } .tip-trigger, .bonus-trigger, .discord-link, .notification-button { width: 36px; height: 36px; } .top-wallet, .wallet-add { min-height: 38px; height: 38px; } }

/* ===== Header, popovers, dialogs and credits: one shared look ===== */
.breadcrumb { visibility: hidden; }

/* Shared surface */
.header-popover, .notification-popover { top: calc(100% + 10px); border: 1px solid #2d333a; border-radius: 14px; background: #1c1f23; box-shadow: 0 20px 44px #000a; animation: pop-in .16s ease-out; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.popover-heading { padding: 16px 16px 12px; border-bottom: 1px solid #262b30; }
.popover-heading strong { font: 400 18px/1 "Lilita One", sans-serif; letter-spacing: .02em; }
.popover-heading span { color: #7f878e; font-size: 12px; font-weight: 600; }
.popover-submit, .username-submit { height: 44px; margin: 14px 16px 0; width: calc(100% - 32px); border-radius: 10px; background: var(--blue); box-shadow: inset 0 -3px 0 #2a5c9f; font: 700 14px var(--body); }
.popover-submit:hover, .username-submit:hover { background: #5b9bf0; }
.popover-hint { margin: 8px 16px 0; color: #7f878e; font-size: 12px; }
.popover-hint.is-error { color: #ff8a8a; }
.popover-submit:disabled { opacity: .55; cursor: default; }

/* Inputs */
.tip-popover label, .username-label, .email-auth-form label { gap: 7px; margin: 14px 16px 0; color: #aab1b7; font-size: 12px; font-weight: 600; }
.tip-popover input, .tip-popover select, .username-label input, .email-auth-form input { height: 44px; padding: 0 12px; border: 1px solid #2d333a; border-radius: 10px; background: #121417; color: #fff; font: 600 14px var(--body); box-shadow: inset 0 2px 0 #0000004d; transition: border-color .15s ease; }
.tip-popover input:focus, .tip-popover select:focus, .username-label input:focus, .email-auth-form input:focus { outline: none; border-color: var(--blue); }
.tip-amount-row select { width: 104px; }

/* Wallet */
.wallet-popover { width: 320px; padding-bottom: 14px; }
.wallet-toggle { margin: 14px 16px 0; padding: 4px; border-radius: 10px; background: #121417; }
.wallet-toggle button { height: 34px; border-radius: 7px; font-size: 13px; font-weight: 700; }
.wallet-toggle button.active { background: #2b3036; box-shadow: inset 0 -2px 0 #0005; }
.wallet-conversion { justify-content: center; margin: 14px 16px 0; padding: 20px 12px; border-radius: 12px; background: radial-gradient(circle at 50% 0, #2c4466, #1a2230 75%); }
.wallet-conversion strong { font: 400 28px/1 "Lilita One", sans-serif; letter-spacing: .02em; }
.wallet-popover > a { justify-content: center; gap: 8px; height: 44px; margin: 12px 16px 0; padding: 0; border-radius: 10px; background: var(--blue); box-shadow: inset 0 -3px 0 #2a5c9f; font-weight: 700; }
.wallet-popover > a:hover { background: #5b9bf0; }

/* Daily bonus */
.bonus-popover { display: flex; flex-direction: column; width: 300px; padding-bottom: 16px; text-align: center; }
.bonus-popover .popover-art { width: 96px; margin: 18px auto 0; filter: drop-shadow(0 10px 12px #0008); animation: bonus-bob 3s ease-in-out infinite; }
@keyframes bonus-bob { 50% { transform: translateY(-5px) rotate(-3deg); } }
.bonus-popover .popover-heading { display: contents; }
.bonus-popover .popover-heading strong { margin-top: 12px; font-size: 22px; }
.bonus-popover > p { order: 2; margin: 8px 20px 0; color: #9ca4ab; font-size: 13px; }
.bonus-popover .popover-heading .popover-submit { order: 3; width: calc(100% - 32px); height: 44px; margin: 16px 16px 0; padding: 0; background: #f2c14e; box-shadow: inset 0 -3px 0 #a8801f; color: #3b2b06; }
.bonus-popover .popover-heading .popover-submit:hover { background: #ffd068; }

/* Tip */
.tip-popover { width: 320px; padding-bottom: 16px; }

/* Notifications */
.notification-popover { width: min(360px, calc(100vw - 28px)); }
.notification-list { max-height: 380px; padding: 6px; }
.notification-item { gap: 3px; margin-bottom: 2px; padding: 12px 12px 12px 26px; border: 0; border-radius: 10px; background: transparent; }
.notification-item:hover { background: #252a30; }
.notification-item.unread { background: #1f2a3a; }
.notification-item.unread::before { top: 18px; left: 11px; width: 7px; height: 7px; box-shadow: 0 0 0 3px #4d8ee733; }
.notification-item strong { font-size: 13px; }
.notification-item span { color: #aab1b7; font-size: 12.5px; }
.notification-item small { color: #6f777e; font-size: 11px; }
.notification-empty { display: grid; justify-items: center; gap: 10px; margin: 0; padding: 30px 16px 26px; color: #8a929a; font-size: 13px; text-align: center; }
.notification-empty::before { content: ""; width: 44px; height: 44px; border-radius: 12px; background: #252a30; -webkit-mask: none; box-shadow: inset 0 0 0 1px #2d333a; }

/* Sign-in dialog */
.auth-dialog, .username-dialog { width: min(420px, calc(100vw - 30px)); padding: 30px 28px 26px; border: 1px solid #2d333a; border-radius: 18px; background: #1c1f23; box-shadow: 0 30px 70px #000c; }
.auth-dialog::backdrop, .username-dialog::backdrop { background: #0b0c0ecc; backdrop-filter: blur(6px); }
.auth-logo { display: block; width: 84px; height: 84px; margin: 0 auto 12px; border-radius: 50%; box-shadow: 0 8px 20px #0008; }
.auth-dialog h2, .username-dialog h2 { font: 400 28px/1.1 "Lilita One", sans-serif; letter-spacing: .02em; }
.auth-dialog > p, .username-dialog > p { color: #9ca4ab; font-size: 13.5px; }
.email-auth-form { gap: 0; margin: 6px 0 16px; }
.email-auth-form label { margin: 12px 0 0; }
.email-auth-form button { height: 46px; margin-top: 16px; border-radius: 10px; font: 700 14px var(--body); }
.email-auth-form button[type="submit"] { background: var(--blue); box-shadow: inset 0 -3px 0 #2a5c9f; }
.email-auth-form button[type="submit"]:hover { background: #5b9bf0; }
.email-auth-form button[type="button"] { margin-top: 8px; background: transparent; color: #8fb8ee; }
.email-auth-form button[type="button"]:hover { color: #fff; }
.google-signin { min-height: 46px; border: 1px solid #2d333a; border-radius: 10px; background: #252a30; font-weight: 700; }
.dialog-close { border-radius: 10px; background: #252a30; }

/* Credits page: the price leads (it's the actual decision), the credit count is a small label above it,
   same way most real pricing pages work. Flat cards, one accent color (the site's own blue), no per-card
   color-coding, no gradients, no badges -- the biggest pack stands out by being physically bigger, full
   width, on its own row, not by decoration. */
.credits-panel h2 { margin-bottom: 6px; font: 400 32px/1 "Lilita One", sans-serif; letter-spacing: .02em; }
.credits-pricing-note { margin: 0 0 22px; color: #7f878e; font-size: 13px; }
.credit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: none; }
.credit-card { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 0; padding: 22px 18px 18px; border: 1px solid #2a2f35; border-radius: 14px; background: #1c2024; text-align: center; transition: transform .2s ease, border-color .2s ease; }
.credit-card:hover { transform: translateY(-3px); border-color: #3a4048; }
.credit-card-icon { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; margin: 0 0 10px; }
.credit-card-icon .coin-icon { width: 32px; height: 32px; filter: drop-shadow(0 4px 6px #0006); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.credit-card:hover .coin-icon { transform: rotate(-14deg) scale(1.12); }
.credit-label { margin: 0; color: #9199a0; font: 400 15px/1 "Lilita One", sans-serif; letter-spacing: .01em; }
.credit-price { display: block; margin: 6px 0 14px; color: #fff; font: 400 42px/1 "Lilita One", sans-serif; letter-spacing: .01em; }
.credit-price span { font-size: 18px; color: #6f777e; font-weight: 400; }
.credit-card .credit-button { width: 100%; height: 42px; margin-top: auto; border-radius: 9px; background: var(--blue); box-shadow: inset 0 -3px 0 #2a5c9f; font: 700 13px var(--body); }
.credit-card .credit-button:hover:not(:disabled) { background: #5b9bf0; }
.credit-card-featured { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: auto 1fr auto; column-gap: 18px; align-items: center; padding: 20px 24px; text-align: left; }
.credit-card-featured .credit-card-icon { grid-column: 1; grid-row: 1 / span 2; width: 52px; height: 52px; margin: 0; }
.credit-card-featured .coin-icon { width: 44px; height: 44px; }
.credit-card-featured .credit-label { grid-column: 2; grid-row: 1; align-self: end; }
.credit-card-featured .credit-price { grid-column: 2; grid-row: 2; align-self: start; margin: 4px 0 0; font-size: 46px; }
.credit-card-featured .credit-button { grid-column: 3; grid-row: 1 / span 2; width: 200px; margin: 0; }
@media (max-width: 700px) { .credit-card-featured { grid-template-columns: 1fr; text-align: center; padding: 20px; } .credit-card-featured .credit-card-icon, .credit-card-featured .credit-label, .credit-card-featured .credit-price, .credit-card-featured .credit-button { grid-column: 1; grid-row: auto; } .credit-card-featured .credit-card-icon { margin: 0 auto; } .credit-card-featured .credit-button { width: 100%; margin-top: 14px; } }
@media (max-width: 900px) { .credit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.google-signin { color: #e6e9ec; }
.tip-amount-row select { width: 118px; flex: none; padding: 0 8px; }
.notification-popover .popover-heading strong { font: 400 18px/1 "Lilita One", sans-serif; letter-spacing: .02em; }

/* Wallet balance box: flat, no gradient. */
.wallet-conversion { background: #121417; box-shadow: inset 0 2px 0 #0000004d; border: 1px solid #262b30; }
.wallet-conversion strong { font-size: 24px; }

/* Your purchases */
#purchases-title { font: 400 32px/1 "Lilita One", sans-serif; letter-spacing: .02em; }
.orders-list { max-width: 820px; gap: 8px; }
.order-row { gap: 14px; padding: 12px 16px 12px 12px; border: 0; border-radius: 12px; background: #1f2327; transition: background-color .15s ease; }
.order-row:hover { background: #242930; }
.order-icon { display: grid; flex: none; place-items: center; width: 48px; height: 48px; border-radius: 10px; background: #262b31; }
.order-icon img { width: 34px; filter: drop-shadow(0 4px 5px #0006); }
.order-icon svg { width: 28px; height: 28px; }
.order-details { flex: 1; min-width: 0; }
.order-name { overflow: hidden; color: #fff; font: 700 14.5px var(--body); text-overflow: ellipsis; white-space: nowrap; }
.order-date { margin-top: 3px; color: #7f878e; font-size: 12px; }
.order-value { padding: 6px 10px; border-radius: 8px; background: #262b31; color: #c3c9ce; font: 700 13px var(--body); white-space: nowrap; }
.order-value.is-plus { background: #1d3a2b; color: #5fe0a0; }
.order-open { width: auto; height: 36px; padding: 0 14px; border: 0; border-radius: 9px; background: var(--blue); box-shadow: inset 0 -3px 0 #2a5c9f; font: 700 13px var(--body); }
.orders-empty { display: grid; justify-items: center; gap: 6px; max-width: 820px; padding: 40px 20px; border: 0; border-radius: 14px; background: #1f2327; text-align: center; }
.orders-empty img { width: 92px; margin-bottom: 8px; filter: drop-shadow(0 10px 12px #0007); }
.orders-empty strong { font: 400 22px/1.1 "Lilita One", sans-serif; letter-spacing: .02em; }
.orders-empty span { color: #9ca4ab; font-size: 13.5px; }
.orders-empty-btn { display: inline-flex; align-items: center; height: 42px; margin-top: 12px; padding: 0 20px; border-radius: 10px; background: var(--blue); box-shadow: inset 0 -3px 0 #2a5c9f; color: #fff; font-weight: 700; }
.orders-empty-btn:hover { background: #5b9bf0; }
@media (max-width: 560px) { .order-row { flex-wrap: wrap; } .order-details { flex-basis: calc(100% - 64px); } .order-value { margin-left: 62px; } }

/* ===== Mobile: drawer sidebar, compact header, tighter home ===== */
.menu-toggle, .nav-backdrop { display: none; }
@media (max-width: 760px) {
  /* Drawer */
  .sidebar { width: 280px !important; padding: 18px 12px 16px !important; transform: translateX(-100%); transition: transform .25s ease; z-index: 40; box-shadow: none; }
  body.nav-open .sidebar { transform: none; box-shadow: 20px 0 50px #000a; }
  .nav-backdrop { position: fixed; inset: 0; z-index: 39; display: block; background: #0009; backdrop-filter: blur(2px); }
  .nav-backdrop[hidden] { display: none; }
  .main-area { margin-left: 0 !important; }
  .sidebar .brand { display: block; min-height: 0; margin: 10px 0 20px; padding: 0; }
  .sidebar .brand-name { display: block !important; }
  .sidebar .brand-mini { display: none !important; }
  .brand-name strong { font-size: 27px; } .brand-name span { font-size: 23px; }
  .sidebar .nav-link { justify-content: flex-start !important; width: auto !important; height: auto !important; min-height: 44px; padding: 0 12px !important; }
  .sidebar .nav-link > span { display: inline !important; }
  .nav-section { border: 1px solid #2a2f35 !important; background: #1f2327 !important; }
  .nav-section-head { justify-content: flex-start !important; width: 100% !important; padding: 0 8px 0 12px !important; }
  .nav-section-head > span:not(.nav-chevron), .nav-section-head .nav-ico { display: inline-block !important; }
  .nav-chevron { margin-left: auto !important; }
  .nav-section .nav-link { padding: 0 8px !important; }

  /* Header */
  .topbar { display: flex !important; gap: 8px; height: 62px !important; padding: 0 12px !important; }
  .menu-toggle { display: grid; flex: none; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: #22272c; color: #fff; }
  .menu-toggle svg { width: 20px; height: 20px; }
  .mobile-brand { display: flex !important; flex: none; }
  .mobile-brand > span:last-child { display: none; }
  .mobile-brand .brand-mark, .mobile-brand .brand-mark img { width: 36px !important; height: 36px !important; }
  .breadcrumb { display: none; }
  .wallet-center-wrap { position: static; flex: 1; justify-content: center; min-width: 0; }
  .top-wallet { min-width: 0; height: 40px; min-height: 40px; padding: 0 10px; font-size: 13px; }
  .top-wallet .credits-label { display: none; }
  .wallet-add { height: 40px; padding: 0 11px; }
  .wallet-add span { display: none; }
  .topbar-right { flex: none; gap: 6px; }
  .virtual-credit-action, .discord-link { display: none !important; }
  .notification-button { width: 40px !important; height: 40px !important; }
  .avatar-button { width: 40px; height: 40px; }
  .avatar-button.login-button { min-width: 0; height: 40px; padding: 0 14px; }
  .header-action-wrap, .notification-wrap { position: static; }
  .header-popover, .notification-popover { position: fixed; top: 70px !important; right: 10px !important; left: 10px !important; width: auto !important; }

  /* Home */
  .page-content { padding-right: 14px !important; padding-left: 14px !important; }
  .home-page { gap: 14px; }
  .home-top { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px; }
  .home-hero { grid-column: 1 / -1; min-height: 0; padding: 20px 18px; }
  .home-hero h1 { font-size: 28px; }
  .home-hero-copy { max-width: 70%; }
  .home-hero-mark { width: 130px; height: 130px; right: -26px; bottom: -26px; opacity: .9; }
  .home-promo { min-height: 128px !important; padding: 10px; border-radius: 12px; }
  .home-promo .promo-art { inset: 8px 0 42px !important; height: auto !important; max-height: 70px; }
  .home-promo strong { font-size: 13px !important; white-space: normal; line-height: 1.05; }
  .home-promo span:not(.promo-tag) { display: none; }
  .home-games { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px; }
  .tile-card strong { font-size: 15px !important; }
  .tile-card small { font-size: 7px; letter-spacing: .1em; }
  .tile-count { font-size: 11px; }
  .acc-card { grid-template-columns: 110px minmax(0, 1fr) !important; }
  .acc-art { padding: 0 !important; }
  .acc-art img { width: 76px; }
  .acc-ribbon { top: 8px; padding: 3px 7px; font-size: 9px; }
  .acc-body { padding: 14px; }
  .acc-body h3 { font-size: 18px; }
  .acc-body p { display: none; }
  .acc-chips { margin: 8px 0 12px; }
  .acc-chips li { padding: 4px 7px; font-size: 11px; }
  .acc-foot { flex-wrap: wrap; }
  .acc-btn { height: 36px; padding: 0 12px; }
  .home-bottom { grid-template-columns: 1fr !important; }
  .home-banner { min-height: 140px; padding: 20px; }
  .banner-copy { max-width: 62%; }
  .banner-copy h3 { font-size: 24px; }
  .credit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  .credit-price { font-size: 34px; }
}
@media (max-width: 760px) { .home-hero-mark { display: none; } .home-hero-copy { max-width: 100%; } .home-actions { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .sidebar .brand { min-height: 76px !important; height: auto !important; } .sidebar .brand-name { position: static !important; } }

/* Notifications v2: hidden scrollbar, icon rows, staggered entrance, soft fade at the bottom. */
.notification-list { scrollbar-width: none; -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent); mask-image: linear-gradient(#000 calc(100% - 28px), transparent); padding-bottom: 20px; }
.notification-list::-webkit-scrollbar { display: none; }
.notification-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; animation: notif-in .3s cubic-bezier(.2, .8, .3, 1) both; transition: background-color .15s ease, transform .15s ease; }
.notification-item:hover { transform: translateX(2px); }
.notification-item.unread::before { top: 10px; left: 44px; z-index: 1; border: 2px solid #1c1f23; box-shadow: none; }
.notification-empty::before { width: 22px; height: 22px; padding: 11px; border-radius: 12px; background: #6f777e; -webkit-mask: url(icons/bell.svg) center / 22px no-repeat; mask: url(icons/bell.svg) center / 22px no-repeat; box-shadow: none; }
@keyframes notif-in { from { opacity: 0; transform: translateY(6px); } }
.notification-icon { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #262b31; }
.notification-icon img { width: 28px; filter: drop-shadow(0 3px 4px #0006); }
.notification-icon svg { width: 24px; height: 24px; }
.notification-icon.is-bell::after { content: ""; width: 18px; height: 18px; background: #8a929a; -webkit-mask: url(icons/bell.svg) center / contain no-repeat; mask: url(icons/bell.svg) center / contain no-repeat; }
.notification-item.unread .notification-icon { background: #22344c; }
.notification-copy { display: grid; gap: 2px; min-width: 0; }
.notification-copy small { margin-top: 2px; }

/* Header balance: number only. */
.top-wallet .credits-label { display: none; }
.top-wallet { gap: 8px; padding: 0 16px 0 13px; }

/* Tip currency toggle. */
.tip-currency-toggle { display: grid; grid-template-columns: 1fr 1fr; flex: none; gap: 3px; width: 140px; padding: 3px; border: 1px solid #2d333a; border-radius: 10px; background: #121417; }
.tip-currency-toggle button { border: 0; border-radius: 7px; background: transparent; color: #8a929a; font: 700 13px var(--body); cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.tip-currency-toggle button:hover { color: #fff; }
.tip-currency-toggle button.active { background: #2b3036; box-shadow: inset 0 -2px 0 #0005; color: #fff; }

/* Purchases: View demo keeps its blue on hover. */
.order-open.order-row-action:hover { border: 0; background: #5b9bf0; transform: translateY(-1px); }

/* Purchased account dialog. */
.delivery-dialog { width: min(440px, calc(100vw - 30px)); padding: 28px; border: 1px solid #2d333a; border-radius: 18px; background: #1c1f23; box-shadow: 0 30px 70px #000c; color: #fff; text-align: center; }
.delivery-dialog::backdrop { background: #0b0c0ecc; backdrop-filter: blur(6px); }
.delivery-brand { justify-content: center; flex-direction: column; gap: 10px; color: #8a929a; font: 700 12px var(--body); letter-spacing: .04em; text-transform: uppercase; }
.delivery-brand-icon { width: 96px; height: 96px; border-radius: 0; background: url(icons/gift-cosmetic.png) center / contain no-repeat; filter: drop-shadow(0 10px 14px #0008); animation: bonus-bob 3s ease-in-out infinite; }
.delivery-brand-icon img { display: none; }
.delivery-dialog h2 { margin-top: 6px; font: 400 28px/1.1 "Lilita One", sans-serif; letter-spacing: .02em; }
.delivery-product { margin: 6px 0 18px; color: #9ca4ab; font-size: 13.5px; }
.credential-list { display: grid; gap: 8px; overflow: visible; border: 0; background: none; text-align: left; }
.credential-row { padding: 0; border: 0 !important; background: none; flex-direction: column; align-items: stretch; gap: 6px; }
.credential-row > span { color: #aab1b7; font-size: 12px; font-weight: 600; }
.credential-copy { justify-content: space-between; width: 100%; height: 46px; padding: 0 14px; border: 1px solid #2d333a; border-radius: 10px; background: #121417; box-shadow: inset 0 2px 0 #0000004d; color: #fff; cursor: pointer; transition: border-color .15s ease; }
.credential-copy:hover { border-color: var(--blue); background: #121417; }
.credential-copy strong { font: 700 14px ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: .02em; }
.credential-copy img { width: 16px; height: 16px; opacity: .7; }
.delivery-done { height: 46px; margin-top: 18px; border-radius: 10px; box-shadow: inset 0 -3px 0 #2a5c9f; font: 700 14px var(--body); }
.delivery-done:hover { background: #5b9bf0; }

/* Badges: bigger, no outline, number centred. */
.notification-badge, .purchase-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border: 0 !important; border-radius: 999px; background: #ef4f5a; box-shadow: 0 2px 6px #ef4f5a66; color: #fff; font: 800 11px/1 var(--body); font-variant-numeric: tabular-nums; }
.notification-badge { top: -6px; right: -6px; }
.notification-badge[hidden], .purchase-badge[hidden], .sidebar .nav-link > span[hidden] { display: none !important; }

/* Profile menu. */
.profile-popover { width: 280px; padding-bottom: 8px; }
.profile-summary { gap: 12px; padding: 16px; border-bottom: 1px solid #262b30; }
.profile-summary > img { width: 46px; height: 46px; border: 2px solid #2d333a; }
.profile-summary strong { color: #fff; font: 400 18px/1.1 "Lilita One", sans-serif; letter-spacing: .02em; }
.profile-summary span { color: #8a929a; font-size: 13px; }
.profile-popover > button { width: calc(100% - 16px); height: 44px; margin: 8px 8px 0; padding: 0 12px; gap: 10px; border-radius: 10px; color: #e6e9ec; font: 700 14px var(--body); }
.profile-popover > button:hover { background: #3a2226; color: #ff8a92; }
.profile-popover > button img { width: 17px; height: 17px; }

/* Header wallet: one flat unit, no outline. */
.wallet-center-wrap { padding: 4px; border-radius: 13px; background: #121417; box-shadow: inset 0 2px 0 #0000004d; }
.top-wallet { min-height: 38px; border: 0 !important; border-radius: 9px; background: transparent !important; box-shadow: none; }
.top-wallet:hover, .top-wallet[aria-expanded="true"] { background: #1c2024 !important; }
.wallet-add { height: 38px; padding: 0 14px; border-radius: 9px; }

/* Avatar keeps its size everywhere. */
.avatar-button:not(.login-button) { width: 42px !important; height: 42px !important; flex: none; overflow: hidden; }
@media (max-width: 760px) { .avatar-button:not(.login-button) { width: 40px !important; height: 40px !important; } .wallet-center-wrap { padding: 3px; } .top-wallet, .wallet-add { min-height: 34px; height: 34px; } }

/* Keep the wordmark clear of the first nav row; let the navigation scroll as one quiet column. */
.sidebar { overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; scrollbar-color: #414951 transparent; }
.sidebar .brand, .sidebar > .nav-group { flex-shrink: 0; }
.sidebar::-webkit-scrollbar { width: 5px; }
.sidebar::-webkit-scrollbar-thumb { border-radius: 99px; background: #414951; }
.sidebar::-webkit-scrollbar-thumb:hover { background: #5a646d; }

/* Currency view lives inside the existing dark wallet rail. */
.wallet-swap { display: flex; flex: none; width: 58px; height: 38px; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0; border: 0; border-radius: 9px; background: #30363d; box-shadow: inset 0 -3px 0 #23282d; color: #e6eaed; cursor: pointer; transition: background-color .15s ease, color .15s ease, transform .15s ease; }
.wallet-swap:hover { background: #3d454e; }
.wallet-swap[aria-pressed="true"] { background: #257a52; box-shadow: inset 0 -3px 0 #185b3b; color: #fff; }
.wallet-swap[aria-pressed="true"]:hover { background: #2b8c5e; }
.wallet-swap:active { transform: translateY(1px); }
.wallet-swap:focus-visible { outline: 2px solid #7eb1f3; outline-offset: 2px; }
.wallet-swap .wallet-swap-arrows { width: 18px; height: 18px; }
.wallet-swap .wallet-swap-coin { width: 17px; height: 17px; }
.wallet-swap .wallet-swap-coin[hidden], .wallet-swap span[hidden] { display: none; }
.wallet-swap span { font: 800 12px/1 "Space Grotesk", sans-serif; letter-spacing: .025em; }
.top-wallet .wallet-icon[hidden] { display: none; }
.top-wallet #top-balance { white-space: nowrap; }
@media (max-width: 760px) { .wallet-swap { width: 48px; height: 34px; } .wallet-swap .wallet-swap-arrows { width: 16px; height: 16px; } .wallet-swap .wallet-swap-coin { width: 15px; height: 15px; } .wallet-swap span { font-size: 11px; } }

/* Casino games on phones: controls stack in one column, board fits the width. */
@media (max-width: 760px) {
  .casino-scope .game-controls { flex-wrap: nowrap !important; height: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; }
  .casino-scope .game-controls > * { width: 100% !important; max-width: 100% !important; }
  .casino-scope .game-controls > .game-panel-heading { width: auto !important; }
  .casino-scope .game-side-layout, .casino-scope .chicken-game { grid-template-columns: minmax(0, 1fr) !important; }
  .casino-scope, .casino-scope .game-view, .casino-play-area { max-width: 100%; overflow-x: hidden; }
}
.game-tile[data-game="roulette"] .live-art > svg > g:first-of-type { transform: rotate(0deg); }

/* Username dialog: matches the sign-in dialog. */
.username-dialog { text-align: center; }
.username-dialog > p { margin: 0 0 18px; }
.username-label { margin: 0 !important; text-align: left; }
.username-label input { margin-top: 0; }
.username-submit { width: 100% !important; margin: 16px 0 0 !important; }
.username-dialog .auth-error { margin: 10px 0 0; color: #ff8a92; font-size: 13px; text-align: left; }
.username-dialog .auth-error { display: flex; align-items: center; gap: 8px; margin: 10px 0 0 !important; padding: 10px 12px; border-radius: 10px; background: #3a2226; color: #ff9aa1 !important; font-size: 13px; font-weight: 600; text-align: left !important; }
.username-dialog .auth-error::before { content: "!"; display: grid; flex: none; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #ef4f5a; color: #fff; font-size: 12px; font-weight: 800; }
.username-dialog .auth-error[hidden] { display: none; }
.username-dialog:focus, .username-dialog:focus-visible, .auth-dialog:focus, .auth-dialog:focus-visible { outline: none; }

/* Marketplace: the same playful shop language as Home, Credits, and Purchases. */
#marketplace.hero { position: relative; grid-template-columns: minmax(0, 1.15fr) minmax(240px, .85fr); gap: 0; min-height: 256px; overflow: hidden; margin-bottom: 28px; border: 0; border-radius: 14px; background: linear-gradient(118deg, #24476f 0%, #1d334e 51%, #1b2330 100%); box-shadow: none; scroll-margin-top: 90px; }
#marketplace .hero-copy { position: relative; z-index: 2; align-self: center; min-width: 0; padding: 28px 10px 28px 30px; }
#marketplace .hero-greeting:not([hidden]) { margin: 0 0 7px; font: 700 13px/1.2 var(--body); letter-spacing: 0; }
#marketplace .hero-greeting strong { color: #92c5ff; }
#marketplace h1 { margin: 0 0 8px; color: #fff; font: 400 clamp(34px, 3.5vw, 47px)/.99 "Lilita One", "Bowlby One SC", Impact, sans-serif; letter-spacing: .01em; text-shadow: 0 3px 0 #0c223c; }
#marketplace h1 span { color: #77b9ff; background: none; -webkit-text-fill-color: currentColor; }
#marketplace .hero-copy > p:not(.hero-greeting) { max-width: 440px; color: #c8d9ec; font-size: 13px; line-height: 1.45; }
#marketplace .hero-link { gap: 9px; min-height: 39px; margin-top: 17px; padding: 0 12px 0 16px; border-radius: 8px; background: var(--blue); box-shadow: inset 0 -3px 0 #2a5c9f; color: #fff; font-size: 13px; font-weight: 700; transition: background-color .15s ease, transform .15s ease; }
#marketplace .hero-link:hover { transform: translateY(-2px); background: #5b9bf0; }
#marketplace .hero-link span { width: 18px; height: 18px; background: transparent; }
#marketplace .hero-link:hover span { transform: translate(2px, -2px); background: transparent; }
#marketplace .hero-link img, #marketplace .hero-link:hover img { width: 14px; height: 14px; filter: invert(1); }
#marketplace .hero-art { position: relative; min-height: 256px; overflow: hidden; border: 0; border-radius: 0; background: transparent; }
#marketplace .hero-art::after { content: ""; top: -77px; right: -82px; width: 350px; height: 350px; border: 0; border-radius: 50%; background: #ffffff0c; box-shadow: 0 0 0 42px #ffffff07, 0 0 0 86px #ffffff04; }
.market-hero-gift { position: absolute; z-index: 1; width: 146px; height: 146px; object-fit: contain; filter: drop-shadow(0 9px 8px #10182780); }
.market-hero-gift-basic { left: 9%; bottom: 28px; transform: rotate(-12deg); }
.market-hero-gift-cosmetic { right: 11%; bottom: 38px; width: 166px; height: 166px; transform: rotate(10deg); }
.market-steam-stamp { position: absolute; z-index: 3; top: 15px; right: 15px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 7px; background: #101922b8; color: #e6f0fa; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.market-steam-stamp img { width: 15px; height: 15px; filter: invert(1); }
#packs .section-heading { margin-bottom: 15px; }
#packs .section-heading h2 { font: 400 28px/1.05 "Lilita One", sans-serif; letter-spacing: .01em; }
#packs .product-grid { gap: 14px; align-items: stretch; }
#packs .product-card { min-width: 0; min-height: 0; padding: 0; overflow: hidden; border: 0; border-radius: 14px; background: #1f2327; box-shadow: none; transition: transform .2s ease; }
#packs .product-card:hover { transform: translateY(-4px); }
#packs .featured-card { width: 100%; border-radius: 14px; background: #1f2327; }
#packs .gift-art { position: relative; flex: none; height: 164px; margin: 0; overflow: hidden; }
#packs .gift-art::before { position: absolute; top: -73px; left: 50%; width: 310px; height: 310px; transform: translateX(-50%); border-radius: 50%; background: #ffffff0b; box-shadow: 0 0 0 34px #ffffff08, 0 0 0 72px #ffffff04; content: ""; }
#packs .basic-gift { background: radial-gradient(ellipse at 50% 38%, #375d80 0%, #2c4d6d 54%, #233c57 100%); }
#packs .cosmetic-gift { background: radial-gradient(ellipse at 50% 38%, #624a76 0%, #4d3b61 54%, #382d4b 100%); }
#packs .gift-art img { position: relative; z-index: 1; width: 136px; height: 136px; filter: drop-shadow(0 8px 8px #0006); }
#packs .product-card:hover .gift-art img { transform: translateY(-5px) rotate(-4deg) scale(1.05); filter: drop-shadow(0 11px 9px #0007); }
.product-content { display: flex; flex: 1; flex-direction: column; padding: 19px 21px 20px; }
#packs .product-card h3 { margin: 0; font: 400 24px/1.05 "Lilita One", sans-serif; letter-spacing: .01em; text-align: left; }
#packs .product-description { min-height: 0; max-width: none; margin: 7px 0 0; color: #aab1b7; font-size: 13px; line-height: 1.4; text-align: left; }
#packs .account-odds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: auto 0 18px; padding-top: 17px; }
#packs .account-odds > div { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; min-height: 34px; padding: 6px 8px; border: 0 !important; border-radius: 6px; background: #2a2f35; color: #aab1b7; font-size: 10.5px; line-height: 1.2; }
#packs .account-odds > div:nth-child(3), #packs .account-odds > div:nth-child(5) { margin: 0; }
#packs .account-odds > div:last-child { grid-column: 1 / -1; }
#packs .account-odds strong { flex: none; color: #fff; font-size: 12px; font-weight: 800; }
#packs .product-meta { color: #9ca4ab; font-size: 12px; }
#packs .product-meta .price { color: #fff; font: 700 21px/1 var(--display); }
#packs .credit-meta { margin-top: 4px; }
#packs .credit-meta[hidden] { display: none; }
#packs .credit-meta > span:last-child { font-size: 12px; }
#packs .buy-button { flex: none; min-height: 42px; height: auto; margin-top: 15px; border-radius: 8px; background: var(--blue); box-shadow: inset 0 -3px 0 #2a5c9f; font-size: 13px; font-weight: 700; }
#packs .buy-button:not(:disabled):hover { background: #5b9bf0; box-shadow: inset 0 -3px 0 #2a5c9f; }
#packs .buy-button:disabled { background: #3b4c62; box-shadow: inset 0 -3px 0 #29394c; opacity: .8; }
#packs .buy-button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
#packs .buy-button img { width: 15px; height: 15px; }
@media (max-width: 1050px) { #packs .product-grid { grid-template-columns: 1fr; } }
@media (min-width: 761px) and (max-width: 900px) {
  #marketplace.hero { grid-template-columns: 1fr; background: radial-gradient(ellipse 65% 70% at 70% 100%, #587ea72b, transparent 75%), linear-gradient(118deg, #24476f 0%, #1d334e 51%, #1b2330 100%); }
  #marketplace .hero-copy { padding: 23px 24px 0; }
  #marketplace .hero-art { min-height: 150px; }
  #marketplace .hero-art::after { content: none; }
  .market-hero-gift-basic { left: 22%; bottom: -21px; width: 130px; height: 130px; }
  .market-hero-gift-cosmetic { right: 19%; bottom: -17px; width: 145px; height: 145px; }
}
@media (max-width: 760px) {
  #marketplace.hero { grid-template-columns: minmax(0, 1fr) minmax(130px, .45fr); min-height: 220px; }
  #marketplace .hero-copy { padding: 22px 5px 22px 20px; }
  #marketplace .hero-art { min-height: 220px; }
  #marketplace h1 { font-size: clamp(30px, 5vw, 39px); }
  .market-hero-gift-basic { left: -30px; bottom: 23px; width: 125px; height: 125px; }
  .market-hero-gift-cosmetic { right: -16px; bottom: 30px; width: 145px; height: 145px; }
  .market-steam-stamp { top: 10px; right: 10px; }
}
@media (max-width: 520px) {
  #marketplace.hero { grid-template-columns: 1fr; background: radial-gradient(ellipse 85% 50% at 70% 100%, #587ea72b, transparent 75%), linear-gradient(118deg, #24476f 0%, #1d334e 51%, #1b2330 100%); }
  #marketplace .hero-copy { padding: 52px 22px 5px; }
  #marketplace h1 { font-size: 38px; }
  #marketplace .hero-art { min-height: 145px; }
  #marketplace .hero-art::after { content: none; }
  .market-hero-gift-basic { left: 19%; bottom: -22px; width: 130px; height: 130px; }
  .market-hero-gift-cosmetic { right: 14%; bottom: -14px; width: 140px; height: 140px; }
  #packs .account-odds { grid-template-columns: 1fr; }
  #packs .account-odds > div:last-child { grid-column: auto; }
}
@media (max-width: 350px) {
  .purchase-dialog .dialog-summary { align-items: flex-start; flex-direction: column; gap: 4px; }
}

/* Credits mode: yellow pill with black text; custom page scrollbar. */
.wallet-swap[aria-pressed="false"] { background: #f7c64a; box-shadow: inset 0 -3px 0 #d9951c; color: #000; }
.wallet-swap[aria-pressed="false"]:hover { background: #ffd35e; }
.wallet-swap[aria-pressed="false"] span { font-size: 10px; }
html { }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #16191c; }
::-webkit-scrollbar-thumb { background: #3d444b; border-radius: 99px; border: 2px solid #16191c; }
::-webkit-scrollbar-thumb:hover { background: #59626b; }

/* Chrome ignores ::-webkit-scrollbar when scrollbar-width/color are set, so reset them to use the custom pieces. */
html, .sidebar { scrollbar-width: auto; scrollbar-color: auto; }
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-track { margin: 14px 0; background: transparent; }
.sidebar::-webkit-scrollbar-thumb { border-radius: 99px; border: 2px solid var(--sidebar); background: #3d444b; background-clip: padding-box; }
.sidebar::-webkit-scrollbar-thumb:hover { background: #59626b; background-clip: padding-box; }

/* Pumpkin Pick tile: two wooden doors; on hover the right one swings open on a pumpkin. */
.game-tile:is([data-game="pumpkin-pick"]):hover .tile-art { transform: none; }

/* Halloween cards: a deeper orange instead of blue. */
.game-tile:is([data-game="halloween-smash"], [data-game="pumpkin-pick"], [data-game="floor-is-lava"]) .tile-card { background: radial-gradient(circle at 50% 30%, #e2803a 0%, #c9591a 45%, #97400f 100%); }
.game-tile:is([data-game="halloween-smash"], [data-game="pumpkin-pick"], [data-game="floor-is-lava"]) .tile-card::after { background: linear-gradient(transparent, #4a1c0899); }
.game-tile:is([data-game="halloween-smash"], [data-game="pumpkin-pick"], [data-game="floor-is-lava"]) .tile-card strong { text-align: center; text-shadow: 0 3px 0 #7a3510; }
.game-tile:is([data-game="halloween-smash"], [data-game="pumpkin-pick"], [data-game="floor-is-lava"]) .tile-badge { background: #f2803c; color: #2a1408; box-shadow: 0 2px 0 #7a3510; }
.game-tile[data-game="pumpkin-pick"] .pp-t-front { transform-box: fill-box; transform-origin: center bottom; }

/* Pumpkin Pick tile: on hover both doors swing open in 3D, a bomb behind one and a pumpkin behind the other. */
.game-tile[data-game="pumpkin-pick"] .tile-art g { transform-box: fill-box; }
.game-tile[data-game="pumpkin-pick"] .pp-t-left { transform-origin: left center; }
.game-tile[data-game="pumpkin-pick"] .pp-t-right { transform-origin: right center; }
.game-tile[data-game="pumpkin-pick"] .pp-t-pumpkin, .game-tile[data-game="pumpkin-pick"] .pp-t-bomb { transform-origin: center; transform: translateY(6px) scale(.85); }
.game-tile[data-game="pumpkin-pick"]:hover .pp-t-left { animation: pp-t-open-l 2.6s ease-in-out infinite; }
.game-tile[data-game="pumpkin-pick"]:hover .pp-t-right { animation: pp-t-open-r 2.6s ease-in-out infinite; }
.game-tile[data-game="pumpkin-pick"]:hover .pp-t-pumpkin, .game-tile[data-game="pumpkin-pick"]:hover .pp-t-bomb { animation: pp-t-pop 2.6s cubic-bezier(.3, 1.5, .5, 1) infinite; }
.game-tile:is([data-game="pumpkin-pick"]):hover .tile-art { transform: none; }
@keyframes pp-t-open-l { 0%, 10% { transform: perspective(200px) rotateY(0); } 30%, 64% { transform: perspective(200px) rotateY(-70deg); } 86%, 100% { transform: perspective(200px) rotateY(0); } }
@keyframes pp-t-open-r { 0%, 10% { transform: perspective(200px) rotateY(0); } 30%, 64% { transform: perspective(200px) rotateY(70deg); } 86%, 100% { transform: perspective(200px) rotateY(0); } }
@keyframes pp-t-pop { 0%, 24% { transform: translateY(6px) scale(.85); } 40% { transform: translateY(-3px) scale(1.1); } 56%, 66% { transform: translateY(0) scale(1); } 86%, 100% { transform: translateY(6px) scale(.85); } }

/* Dice tile: the die tumbles and the slider handle glides across. */
.game-tile[data-game="dice"] .tile-art g { transform-box: fill-box; transform-origin: center; }
.game-tile[data-game="dice"]:hover .dc-t-bar rect:nth-of-type(3), .game-tile[data-game="dice"]:hover .dc-t-bar path { animation: dc-t-slide 2.2s ease-in-out infinite; }
.game-tile[data-game="dice"] .dc-t-bar rect:nth-of-type(2) { transform-box: fill-box; transform-origin: left center; }
.game-tile[data-game="dice"]:hover .dc-t-bar rect:nth-of-type(2) { animation: dc-t-grow 2.2s ease-in-out infinite; }
.game-tile:is([data-game="dice"]):hover .tile-art { transform: none; }
@keyframes dc-t-slide { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(22px); } }
@keyframes dc-t-grow { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(1.46); } }

/* Site loading screen: covers the page until everything has loaded. */
#site-loader { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: #131518; transition: opacity .4s ease, visibility .4s; animation: sl-failsafe .01s 60s forwards; }
#site-loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.sl-inner { display: grid; justify-items: center; gap: 30px; padding: 24px; }
#site-loader .brand-name { display: block !important; width: auto; }
#site-loader .brand-name strong { font-size: 46px; }
#site-loader .brand-name span { font-size: 40px; }
.sl-bar { position: relative; width: 170px; height: 5px; overflow: hidden; border-radius: 99px; background: #2a3038; }
.sl-bar i { position: absolute; top: 0; bottom: 0; left: 0; width: 4%; border-radius: 99px; background: #4d8ee7; transition: width .45s cubic-bezier(.22, 1, .36, 1); }
@keyframes sl-slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(270%); } }
@keyframes sl-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) { .sl-bar i { transition: none; } }
@media (max-width: 480px) { #site-loader .brand-name strong { font-size: 36px; } #site-loader .brand-name span { font-size: 31px; } }

/* Floor is Lava: the pumpkin lifts off a stone and lands with a small ember burst. */
.game-tile[data-game="floor-is-lava"] .tile-art { top: 5%; left: 3%; width: 94%; }
.game-tile[data-game="floor-is-lava"]:hover .tile-art { transform: none; }
.game-tile[data-game="floor-is-lava"] .lv-t-pumpkin { transform-origin: 60px 78px; transform-box: view-box; transform: translate(-32px, -16px) scale(.6); }
.game-tile[data-game="floor-is-lava"] .lv-t-sparks circle { opacity: 0; transform-box: fill-box; transform-origin: center; }
.game-tile[data-game="floor-is-lava"] .lv-t-sparks circle:nth-child(1) { --sx: -8px; --sy: -11px; }
.game-tile[data-game="floor-is-lava"] .lv-t-sparks circle:nth-child(2) { --sx: 9px; --sy: -13px; }
.game-tile[data-game="floor-is-lava"] .lv-t-sparks circle:nth-child(3) { --sx: 3px; --sy: -9px; }
.game-tile[data-game="floor-is-lava"]:hover .lv-t-pumpkin { animation: lv-card-hop 5.2s ease-in-out infinite; }
.game-tile[data-game="floor-is-lava"]:hover .lv-t-sparks circle { animation: lv-card-spark 5.2s ease-out infinite; }
.game-tile[data-game="floor-is-lava"]:hover .lv-t-stones { animation: lv-card-stone 5.2s ease-in-out infinite; }
@keyframes lv-card-hop { 0%, 4% { transform: translate(-32px, -16px) scale(.6); } 9% { transform: translate(-16px, -46px) scale(.58, .63); } 16% { transform: translate(0, -16px) scale(.64, .55); } 20%, 24% { transform: translate(0, -16px) scale(.6); } 30% { transform: translate(16px, -46px) scale(.58, .63); } 36% { transform: translate(32px, -16px) scale(.64, .55); } 40%, 46% { transform: translate(32px, -16px) scale(.6); } 51% { transform: translate(16px, -46px) scale(.58, .63); } 56% { transform: translate(0, -16px) scale(.64, .55); } 60%, 64% { transform: translate(0, -16px) scale(.6); } 69% { transform: translate(-16px, -46px) scale(.58, .63); } 76% { transform: translate(-32px, -16px) scale(.64, .55); } 80%, 100% { transform: translate(-32px, -16px) scale(.6); } }
@keyframes lv-card-spark { 0%, 15% { opacity: 0; transform: translate(0, 0) scale(.3); } 16% { opacity: 1; transform: translate(0, 0) scale(.5); } 26% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(1); } 28% { opacity: 0; transform: translate(0, 0) scale(.3); } 36% { opacity: 1; transform: translate(0, 0) scale(.5); } 46% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(1); } 48% { opacity: 0; transform: translate(0, 0) scale(.3); } 56% { opacity: 1; transform: translate(0, 0) scale(.5); } 66% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(1); } 68% { opacity: 0; transform: translate(0, 0) scale(.3); } 76% { opacity: 1; transform: translate(0, 0) scale(.5); } 86% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(1); } 88% { opacity: 0; transform: translate(0, 0) scale(.3); } 100% { opacity: 0; } }
@keyframes lv-card-stone { 0%, 15%, 100% { filter: brightness(1); } 16%, 36%, 56%, 76% { filter: brightness(1.3); } 26%, 46%, 66%, 86% { filter: brightness(1); } }
@media (prefers-reduced-motion: reduce) { .game-tile[data-game="floor-is-lava"] .lv-t-pumpkin, .game-tile[data-game="floor-is-lava"] .lv-t-sparks circle, .game-tile[data-game="floor-is-lava"] .lv-t-stones { animation: none !important; } }
.tile-card strong { text-align: center; }

/* Mobile: brand mark lives on the home panel (overhanging its corner, never clipped or over the buttons), not in the header. */
@media (max-width: 760px) {
  .mobile-brand { display: none !important; }
  .home-hero { overflow: visible; margin-top: 34px; }
  .home-hero-copy { max-width: 100% !important; }
  .home-hero-mark { display: block !important; z-index: 2; top: -40px; right: -8px; bottom: auto; width: 128px; height: 128px; opacity: 1 !important; transform: rotate(8deg); pointer-events: none; filter: drop-shadow(0 8px 10px #0008); }
  .home-hero h1 { max-width: calc(100% - 96px); }
}

/* Home brand mark: sits over the panel's bottom-right corner, fully visible, but behind the buttons. */
.home-hero { overflow: visible !important; margin-top: 0 !important; }
.home-top { margin-bottom: 26px; }
.home-hero-copy { position: relative; z-index: 2; }
.home-hero-mark { display: block !important; z-index: 1; top: auto !important; right: -14px !important; bottom: -30px !important; width: 150px !important; height: 150px !important; opacity: 1 !important; transform: rotate(-8deg) !important; pointer-events: none; filter: drop-shadow(0 8px 10px #0008); }
.home-hero h1 { max-width: none !important; }

/* Rank panels */
.rank-panels { display: grid; gap: 12px; margin: 0 0 22px; }
.rank-panel { --rk: #c98a4e; --rk-dark: #7b4a22; position: relative; display: flex; align-items: center; gap: 18px; padding: 18px 22px; overflow: hidden; border-radius: 14px; background: linear-gradient(100deg, color-mix(in srgb, var(--rk) 30%, #16202d) 0%, #182231 55%, #161e2b 100%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rk) 35%, transparent); }
.rank-panel::before { position: absolute; top: -70px; left: -50px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--rk) 38%, transparent), transparent 68%); content: ''; pointer-events: none; }
.rank-badge { position: relative; flex: none; width: 46px; height: 52px; filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--rk) 60%, transparent)); }
.rank-body { position: relative; flex: 1; min-width: 0; }
.rank-line { display: flex; align-items: center; gap: 12px; }
.rank-title { display: grid; gap: 3px; }
.rank-title span { color: #9db4cc; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1; }
.rank-title strong { color: var(--rk); font: 400 24px/1 "Lilita One", "Bowlby One SC", Impact, sans-serif; }
.rank-next { color: #9db4cc; font-size: 12px; line-height: 1; }
.rank-value { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.rank-value b { color: #fff; font: 700 19px/1 var(--display); font-variant-numeric: tabular-nums; }
.rank-value small { color: #9db4cc; font-size: 12px; line-height: 1; }
.rank-bar { height: 7px; margin: 12px 0 9px; overflow: hidden; border-radius: 99px; background: #0d141d; }
.rank-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--rk-dark), var(--rk)); box-shadow: 0 0 10px color-mix(in srgb, var(--rk) 60%, transparent); transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.rank-ladder { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; list-style: none; }
.rank-ladder li { display: flex; align-items: baseline; gap: 5px; color: #5f7590; font-size: 12px; line-height: 1.2; }
.rank-ladder li b { font-weight: 600; }
.rank-ladder li small { font-size: 12px; opacity: .75; }
.rank-ladder li.reached { color: var(--c); }
@media (max-width: 640px) { .rank-ladder small { display: none; } .rank-title strong { font-size: 20px; } .rank-next { display: none; } .rank-panel { padding: 16px; gap: 14px; } }

/* Rakeback view inside the bonus popover */
.bonus-popover .rb-view { display: none; }
.bonus-popover.rb-mode > .popover-art, .bonus-popover.rb-mode > .popover-heading, .bonus-popover.rb-mode > p { display: none; }
.bonus-popover.rb-mode .rb-view { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 18px 4px; }
.rb-kicker { display: inline-flex; align-items: center; padding: 5px 13px; border-radius: 999px; background: #2fbf76; box-shadow: inset 0 -2px 0 #1f8a54; color: #06301b; font: 800 11px var(--body); letter-spacing: .06em; text-transform: uppercase; }
.rb-view strong { margin-top: 6px; color: #fff; font: 400 42px/1.05 "Lilita One", sans-serif; letter-spacing: .02em; font-variant-numeric: tabular-nums; text-shadow: 0 3px 0 #00000040; }
.rb-sub { max-width: 240px; color: #9ca4ab; font-size: 12px; line-height: 1.45; }
.rb-claim { width: 100%; height: 44px; margin-top: 12px; border: 0; border-radius: 9px; background: #4fd28a; box-shadow: inset 0 -3px 0 #2c8c58; color: #062a17; font: 800 14px var(--body); cursor: pointer; }
.rb-claim:disabled { background: #2b3138; box-shadow: none; color: #6f777e; cursor: default; }
/* Logo tucks behind the buttons, on top of the panel. */
.home-hero-mark { right: 34px !important; bottom: -26px !important; }
.home-hero-mark { right: -6px !important; bottom: -32px !important; }
.rank-line { align-items: center; }
.rank-line strong { line-height: 1; }
.rank-line b { line-height: 1; }
.rank-line small { align-self: center; }
.rank-ladder li { align-items: baseline; gap: 5px; font-size: 12px; line-height: 1.2; }
.rank-ladder li small { font-size: 12px; opacity: .75; }
.home-hero-mark { bottom: -4px !important; right: -2px !important; }

/* Rank panels: flat and quiet, colour only on the name, badge and bar. */
.rank-panel { background: #1c2532; box-shadow: none; }
.rank-panel::before { display: none; }
.rank-badge { filter: none; }
.rank-bar i { background: var(--rk); box-shadow: none; }

/* Rank panels: same chunky cartoon language as the hero and the blue buttons. */
.rank-panel { gap: 18px; padding: 20px 24px 22px; background: linear-gradient(135deg, #24476f 0%, #1c2f47 55%, #1b2330 100%); }
#mk-panel { background: linear-gradient(135deg, #353a7a 0%, #2a2d5c 55%, #22243f 100%); }
.rank-badge { width: 50px; height: 56px; }
.rank-title span, .rank-next, .rank-value small, .rank-ladder li { font-family: "Lilita One", "Bowlby One SC", Impact, sans-serif; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; }
.rank-title span { color: #8cc0ff; font-size: 12px; }
.rank-title strong { color: #fff; font-size: 30px; letter-spacing: .01em; text-shadow: 0 3px 0 #0f2744; }
.rank-next { color: #a9c2dc; font-size: 12px; }
.rank-value b { color: #fff; font: 400 26px/1 "Lilita One", "Bowlby One SC", Impact, sans-serif; text-shadow: 0 3px 0 #0f2744; }
.rank-value small { color: #8cc0ff; font-size: 12px; }
.rank-bar { height: 14px; margin: 14px 0 12px; border-radius: 99px; background: #0f2744; box-shadow: inset 0 2px 0 #0006; }
.rank-bar i { background: linear-gradient(#7db6ff, #4a8fe8); box-shadow: 0 3px 0 #2a5c9f; }
.rank-ladder { gap: 8px; }
.rank-ladder li { justify-content: center; padding: 7px 6px; border-radius: 8px; background: #0f2744a0; color: #5f86b3; font-size: 12px; letter-spacing: .05em; }
.rank-ladder li small { font-size: 12px; opacity: .8; }
.rank-ladder li.reached { background: var(--blue, #4a8fe8); box-shadow: 0 3px 0 #2a5c9f; color: #fff; }
@media (max-width: 640px) { .rank-ladder { gap: 4px; } .rank-ladder li { padding: 6px 2px; font-size: 10px; } .rank-title strong { font-size: 24px; } .rank-value b { font-size: 21px; } }

/* Rank panels: flat colour, larger unit labels. */
.rank-panel, #mk-panel { background: #1f3a5c; }
#mk-panel { background: #2d3070; }
.rank-value small { font-size: 16px; }
.rank-value { gap: 9px; }
/* Log out: the button goes red, the label stays white. */
.profile-popover > button:hover { background: #e5484d; color: #fff; }
.page-content { position: relative; z-index: 1; }

/* Home promo cards: saturated colours. */
.promo-gold { background: linear-gradient(160deg, #e3a72a, #a86a10); }
.promo-green { background: linear-gradient(160deg, #35b878, #17704a); }
.promo-purple { background: linear-gradient(160deg, #7168f0, #4238a8); }
.home-promo span { color: #ffffffd9; }
/* Promo cards: halfway between the dark originals and the bright version. */
.promo-gold { background: linear-gradient(160deg, #8f6d26, #674614); }
.promo-green { background: linear-gradient(160deg, #2a8158, #194d37); }
.promo-purple { background: linear-gradient(160deg, #5351b5, #322e74); }
.promo-gold { background: linear-gradient(160deg, #d9b032, #a98218); }
.rank-panels { margin: 22px 0; }
.promo-gold { background: linear-gradient(160deg, #e6b822, #b88a10); }
.promo-green { background: linear-gradient(160deg, #2f9a64, #1a5c3e); }
.promo-gold { background: linear-gradient(160deg, #f0cb2c, #d1aa16); }

.sidebar .nav-link .nav-ico.live-art { position: relative; }
@media (max-width: 760px) {
  .home-hero { margin-top: 30px; }
  .home-hero-mark { top: -34px !important; bottom: auto !important; right: -4px !important; width: 112px !important; height: 112px !important; transform: rotate(8deg) !important; }
  .home-hero h1 { max-width: calc(100% - 90px) !important; }
}

/* Logo lives at the left of the header, with the same side padding as the icons on the right. */
.breadcrumb { display: none; }
.topbar .brand { grid-column: 1; display: block !important; min-height: 0; margin: 0; padding: 0; justify-self: start; }
.topbar .brand-name { display: block !important; width: auto; text-align: left; }
.topbar .brand-name strong, .topbar .brand-name span { margin-left: 0; margin-right: 0; }
.topbar .brand-name strong { font-size: 19px; }
.topbar .brand-name span { margin-top: -1px; font-size: 16.500px; }
.topbar .brand-mini { display: none !important; }
.sidebar { padding-top: 16px; }
@media (max-width: 760px) { .topbar .brand { display: none !important; } }

/* ===== Desktop shell: full-width header, sidebar underneath, collapsible to an icon rail ===== */
@media (min-width: 761px) {
  .topbar { position: fixed; z-index: 20; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 14px; height: 65px; padding: 0 clamp(24px, 4.1vw, 65px) 0 20px; background: var(--bg); border-bottom: 1px solid #2a2e33; }
  .main-area { padding-top: 65px; }
  .sidebar { inset: 65px auto 0 0; padding: 14px 10px 17px; transition: width .2s ease; }
  .main-area { transition: margin-left .2s ease; }
  .menu-toggle { display: grid !important; flex: none; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #c3c9ce; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
  .menu-toggle:hover { background: #22272c; color: #fff; }
  .menu-toggle svg { width: 22px; height: 22px; }
  .topbar .brand { margin-right: auto; }
  .topbar .wallet-center-wrap { position: absolute; left: 50%; transform: translateX(-50%); grid-column: auto; }
  .topbar-right { margin-left: auto; }

  body.sb-collapsed .sidebar { width: 72px !important; padding: 14px 13px 17px; overflow-x: hidden; }
  body.sb-collapsed .main-area { margin-left: 72px !important; }
  body.sb-collapsed .sidebar .nav-link { justify-content: center; width: 46px; padding: 0; gap: 0; }
  body.sb-collapsed .sidebar .nav-link > span { display: none; }
  body.sb-collapsed .nav-section { border-color: transparent; background: transparent; }
  body.sb-collapsed .nav-section-head { justify-content: center; width: 46px; padding: 0; }
  body.sb-collapsed .nav-section-head > span, body.sb-collapsed .nav-section-head .nav-chevron { display: none; }
  body.sb-collapsed .nav-section-body > div { padding: 0; }
  body.sb-collapsed .nav-divider { margin: 10px 4px; }
}
body.sb-collapsed .nav-badge { display: none !important; }

/* Language picker (bottom of the sidebar) */
.lang-picker { position: relative; margin-top: 2px; }
.lang-btn { width: 100%; background: transparent; cursor: pointer; text-align: left; }
.lang-btn .lang-current { flex: 1; }
.lang-chev { flex: none; color: #858e97; transition: transform .2s ease; }
.lang-btn[aria-expanded="true"] .lang-chev { transform: rotate(180deg); }
.lang-menu { position: fixed; z-index: 60; display: grid; gap: 2px; padding: 6px; border: 1px solid #32363b; border-radius: 12px; background: #1f2327; box-shadow: 0 16px 40px #000a; }
.lang-menu[hidden] { display: none; }
.lang-menu button { display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #e6e9ec; font: 600 14px var(--body); text-align: left; cursor: pointer; }
.lang-menu button:hover { background: #2a3037; }
.lang-menu button[aria-checked="true"] { background: var(--blue); color: #fff; }
@media (min-width: 761px) { body.sb-collapsed .lang-btn .lang-current, body.sb-collapsed .lang-btn .lang-chev { display: none; } body.sb-collapsed .lang-btn { justify-content: center; width: 46px; padding: 0; gap: 0; } }
.home-promo strong { white-space: normal; overflow-wrap: anywhere; line-height: 1.05; }

/* First-run language step */
.lang-dialog { width: min(440px, calc(100vw - 30px)); padding: 30px 28px 26px; border: 1px solid #2d333a; border-radius: 18px; background: #1c1f23; box-shadow: 0 30px 70px #000c; color: var(--text); text-align: center; }
.lang-dialog::backdrop { background: #0b0c0ecc; backdrop-filter: blur(6px); }
.lang-dialog[open] { animation: dialog-enter .18s ease-out both; }
.lang-dialog .auth-logo { display: block; width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%; }
.lang-dialog h2 { margin: 4px 0 6px; font: 400 28px/1.1 "Lilita One", sans-serif; letter-spacing: .02em; }
.lang-dialog > p { margin: 0 0 20px; color: #959b9e; font-size: 13px; }
.lang-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px; }
.lang-grid button { position: relative; display: grid; gap: 2px; padding: 14px 14px 13px; border: 1px solid #2d333a; border-radius: 12px; background: #23282d; color: #e6e9ec; text-align: left; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, transform .15s ease; }
.lang-grid button:hover { background: #2a3037; transform: translateY(-1px); }
.lang-grid button b { font: 400 18px/1.1 "Lilita One", sans-serif; letter-spacing: .02em; }
.lang-grid button small { color: #8a9299; font-size: 12px; }
.lang-grid button i { position: absolute; top: 12px; right: 12px; width: 16px; height: 16px; border: 2px solid #3a4148; border-radius: 50%; }
.lang-grid button[aria-checked="true"] { border-color: var(--blue); background: #1f3350; }
.lang-grid button[aria-checked="true"] small { color: #a9c8f5; }
.lang-grid button[aria-checked="true"] i { border-color: var(--blue); background: radial-gradient(circle, var(--blue) 0 45%, transparent 50%); }
.lang-continue { width: 100%; height: 46px; border: 0; border-radius: 10px; background: var(--blue); box-shadow: 0 3px 0 #2a5c9f; color: #fff; font: 700 15px var(--body); cursor: pointer; }
.lang-continue:hover { background: #5b9bf0; }
.lang-continue:active { transform: translateY(2px); box-shadow: 0 1px 0 #2a5c9f; }

/* ===== Terms of Service / Privacy Policy ===== */
.legal-panel { max-width: 1100px !important; }
.legal-hero { display: flex; align-items: center; gap: 22px; padding: 26px 28px; border-radius: 16px; background: linear-gradient(135deg, #24476f 0%, #1c2f47 55%, #1b2330 100%); }
.legal-hero-icon { display: grid; flex: none; place-items: center; width: 68px; height: 68px; border-radius: 18px; background: var(--blue); box-shadow: 0 4px 0 #2a5c9f; color: #fff; }
.legal-hero-icon svg { width: 34px; height: 34px; }
.legal-hero h2 { margin: 0; color: #fff; font: 400 34px/1.05 "Lilita One", "Bowlby One SC", Impact, sans-serif; letter-spacing: .01em; text-shadow: 0 3px 0 #0f2744; }
.legal-hero .policy-lead { max-width: 640px; margin: 8px 0 12px; color: #b9cde3; font-size: 14px; line-height: 1.6; }
.legal-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.legal-meta span { padding: 5px 11px; border-radius: 99px; background: #0f2744a0; color: #8cc0ff; font: 400 12px/1 "Lilita One", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.legal-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 14px 0 22px; }
.legal-card { display: grid; gap: 6px; padding: 16px 16px 15px; border-radius: 14px; color: #fff; }
.legal-card strong { font: 400 18px/1.1 "Lilita One", sans-serif; letter-spacing: .02em; text-shadow: 0 2px 0 #0004; }
.legal-card span { color: #ffffffd9; font-size: 12px; line-height: 1.5; }
.legal-card.blue { background: linear-gradient(160deg, #3f7fd6, #234d8a); }
.legal-card.green { background: linear-gradient(160deg, #2f9a64, #1a5c3e); }
.legal-card.gold { background: linear-gradient(160deg, #d9a92c, #9a7414); }
.legal-card.purple { background: linear-gradient(160deg, #7168f0, #4238a8); }
.legal-body { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 22px; align-items: start; }
.legal-toc { position: sticky; top: 84px; display: grid; gap: 2px; padding: 8px; border: 1px solid #2a2f35; border-radius: 14px; background: #1f2327; }
.legal-toc button { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: #aab2b8; font: 600 13px var(--body); text-align: left; cursor: pointer; }
.legal-toc button b { flex: none; width: 22px; color: #5f86b3; font: 400 12px "Lilita One", sans-serif; letter-spacing: .04em; }
.legal-toc button:hover { background: #2a3037; color: #fff; }
.legal-sections { display: grid; gap: 12px; }
.legal-section { position: relative; padding: 22px 24px 22px 76px; border: 1px solid #2a2f35; border-radius: 14px; background: #1f2327; scroll-margin-top: 84px; }
.legal-num { position: absolute; top: 20px; left: 20px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #24476f; color: #8cc0ff; font: 400 16px/1 "Lilita One", sans-serif; letter-spacing: .04em; }
.legal-section h3 { margin: 2px 0 8px; color: #fff; font: 400 21px/1.15 "Lilita One", "Bowlby One SC", Impact, sans-serif; letter-spacing: .01em; }
.legal-section p { margin: 0 0 10px; color: #bbc1c4; font-size: 14px; line-height: 1.7; }
.legal-section ul { display: grid; gap: 7px; margin: 0 0 10px; padding: 0; list-style: none; }
.legal-section li { position: relative; padding-left: 20px; color: #bbc1c4; font-size: 14px; line-height: 1.6; }
.legal-section li::before { position: absolute; top: 8px; left: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); content: ''; }
.legal-section .legal-note { margin: 12px 0 0; padding: 11px 14px; border-left: 3px solid #f2c14e; border-radius: 0 8px 8px 0; background: #2a2618; color: #e8d9a8; font-size: 13px; }
.legal-section > :last-child { margin-bottom: 0; }
@media (max-width: 900px) { .legal-summary { grid-template-columns: repeat(2, 1fr); } .legal-body { grid-template-columns: 1fr; } .legal-toc { position: static; display: flex; overflow-x: auto; scrollbar-width: none; } .legal-toc button { flex: none; white-space: nowrap; } }
@media (max-width: 560px) { .legal-hero { flex-direction: column; align-items: flex-start; padding: 22px 20px; } .legal-hero h2 { font-size: 28px; } .legal-section { padding: 18px 16px; } .legal-num { position: static; margin-bottom: 8px; } .legal-summary { grid-template-columns: 1fr; } }

/* Support chat */
.chat-link { position: relative; width: 100%; background: transparent; cursor: pointer; text-align: left; }
.chat-badge { margin-left: auto; min-width: 18px; padding: 0 5px; border-radius: 99px; background: var(--red, #e5484d); color: #fff; font: 700 11px/18px var(--body); font-style: normal; text-align: center; }
.chat-badge[hidden] { display: none; }
.chat-drawer { position: fixed; z-index: 30; top: 65px; right: 0; bottom: 0; display: grid; grid-template-rows: auto auto 1fr auto; width: min(380px, 100vw); border-left: 1px solid #2d333a; background: #1a1d20; box-shadow: -20px 0 50px #0008; animation: chat-in .2s ease-out both; }
.chat-drawer[hidden] { display: none; }
@keyframes chat-in { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.chat-top { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #2d333a; }
.chat-top strong { display: block; font: 400 20px/1.1 "Lilita One", sans-serif; }
.chat-avatar { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--blue); box-shadow: 0 3px 0 #2a5c9f; color: #fff; }
.chat-avatar svg { width: 20px; height: 20px; }
.chat-status { display: flex; align-items: center; gap: 6px; color: #6fe39a; font-size: 12px; }
.chat-status i { width: 8px; height: 8px; border-radius: 50%; background: #3dbe7e; }
.chat-status.off { color: #8f979e; } .chat-status.off i { background: #5b636a; }
.chat-close { display: grid; place-items: center; width: 34px; height: 34px; margin-left: auto; border: 0; border-radius: 9px; background: transparent; color: #8f979e; cursor: pointer; }
.chat-close:hover { background: #262b30; color: #fff; }
.chat-close svg { width: 18px; height: 18px; }
.chat-info { margin: 0; padding: 12px 16px; background: #1f2b3d; color: #a9c2dc; font-size: 12.5px; line-height: 1.55; }
.chat-msgs { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; overflow-y: auto; }
.chat-msg { max-width: 82%; padding: 9px 13px; border-radius: 14px 14px 14px 4px; background: #2a3037; color: #e6e9ec; font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-msg.user { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--blue); color: #fff; }
.chat-msg time { display: block; margin-top: 3px; opacity: .6; font-size: 11px; }
.chat-empty { margin: auto; color: #8f979e; font-size: 13px; }
.chat-signin { display: grid; place-content: center; gap: 12px; padding: 24px; text-align: center; color: #b7bdc0; }
.chat-signin[hidden], .chat-form[hidden], .chat-msgs[hidden] { display: none; }
.chat-signin button { padding: 11px 22px; border: 0; border-radius: 10px; background: var(--blue); box-shadow: 0 3px 0 #2a5c9f; color: #fff; font: 700 14px var(--body); cursor: pointer; }
.chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #2d333a; }
.chat-form textarea { flex: 1; min-height: 42px; max-height: 110px; padding: 10px 13px; border: 1px solid #2d333a; border-radius: 12px; background: #15181b; color: #e6e9ec; font: 14px/1.4 var(--body); outline: none; resize: none; }
.chat-form textarea:focus { border-color: var(--blue); }
.chat-form button { display: grid; flex: none; place-items: center; width: 44px; height: 42px; border: 0; border-radius: 12px; background: var(--blue); box-shadow: 0 3px 0 #2a5c9f; color: #fff; cursor: pointer; }
.chat-form button svg { width: 20px; height: 20px; }
@media (max-width: 760px) { .chat-drawer { top: 62px; } }
#hold-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 16px; padding: 13px 16px; border: 1px solid #6b2a30; border-radius: 12px; background: #2b1a1d; color: #ffb3b8; font-size: 14px; }
#hold-banner strong { color: #ff8a92; }
#hold-banner button { margin-left: auto; padding: 8px 14px; border: 0; border-radius: 9px; background: #e5484d; color: #fff; font: 700 13px var(--body); cursor: pointer; }
body.sb-collapsed .chat-link .chat-badge { position: absolute; top: 2px; right: 2px; }

/* Rank perks */
.rank-perk { display: inline-block; margin-left: 0; padding: 4px 10px; border-radius: 99px; background: #0f2744a0; color: #8cc0ff; font: 400 12px/1 "Lilita One", sans-serif; letter-spacing: .06em; text-transform: uppercase; vertical-align: 4px; }
.rank-bets-btn { flex: none; padding: 8px 14px; border: 0; border-radius: 9px; background: var(--blue); box-shadow: 0 3px 0 #2a5c9f; color: #fff; font: 400 13px/1 "Lilita One", sans-serif; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; }
.rank-bets-btn:hover { background: #5b9bf0; }
.rank-bets-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #2a5c9f; }
@media (max-width: 640px) { .rank-perk { display: block; width: max-content; margin: 6px 0 0; } .rank-line { flex-wrap: wrap; } .rank-bets-btn { margin-left: auto; } }

/* Live Wins */
/* min-width: 0 overrides the browser's default "never shrink below content" sizing for a grid/flex item --
   .home-page is a grid, and without this the wide row of cards inside .lw-track (which scrolls internally)
   was instead forcing the whole home grid to stretch to fit it, blowing out the entire page layout. */
.live-wins { min-width: 0; margin: 4px 0 26px; }
.live-wins[hidden] { display: none; }
.lw-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.lw-head h2 { margin: 0; font: 400 22px "Lilita One", sans-serif; }
.lw-dot { width: 9px; height: 9px; border-radius: 50%; background: #3dbe7e; box-shadow: 0 0 0 4px #3dbe7e30; animation: lw-pulse 1.8s ease-in-out infinite; }
@keyframes lw-pulse { 50% { box-shadow: 0 0 0 7px #3dbe7e10; } }
.lw-track { display: flex; min-width: 0; gap: 12px; margin: -10px 0 0; padding: 10px 0 12px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 130px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 130px), transparent); }
.lw-track::-webkit-scrollbar { display: none; }
/* Each card shows the game's real tile art (same SVGs as the home page grid, or the same live-cloned art
   for the four games whose home tile is cloned from the running game) instead of a generic colored block. */
.lw-card { position: relative; display: flex; flex-direction: column; flex: none; gap: 5px; width: 150px; padding: 12px 12px 12px; overflow: hidden; border-radius: 14px; background: linear-gradient(180deg, #2a3037 0%, #1f2429 100%); box-shadow: 0 4px 0 #111417; transition: transform .2s ease; }
.lw-card:hover { transform: translateY(-3px); }
.lw-card.lw-new { animation: lw-in .55s cubic-bezier(.2,.9,.3,1.15) backwards; }
@keyframes lw-in { from { opacity: 0; width: 0; padding-inline: 0; margin-right: -12px; transform: scale(.7) translateY(10px); } 60% { opacity: 1; } to { opacity: 1; width: 150px; margin-right: 0; transform: none; } }
.lw-icon { position: relative; height: 82px; margin-bottom: 4px; }
.lw-icon svg, .lw-icon .live-art { position: absolute; top: 0; left: 8%; width: 84%; height: auto; filter: drop-shadow(0 4px 0 #00000055); }
.lw-info { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.lw-info b { overflow: hidden; color: #fff; font: 400 16px/1.1 "Lilita One", sans-serif; letter-spacing: .01em;  text-overflow: ellipsis; white-space: nowrap; }
.lw-info em { flex: none; padding: 3px 8px; border-radius: 99px; background: #14171a; color: #8fe6ae; font: 400 12px/1.2 "Lilita One", sans-serif; font-style: normal; letter-spacing: .02em; }
.lw-who { display: flex; align-items: center; gap: 6px; min-width: 0; }
.lw-user { min-width: 0; overflow: hidden; color: #aeb6bd; font-size: 12.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.lw-rank { flex: none; padding: 2px 6px; border-radius: 6px; background: #14171a; color: var(--rk); font: 400 9.5px/1.3 "Lilita One", sans-serif; font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.lw-amt { margin-top: 2px; padding: 6px 0; border-radius: 9px; background: #14171a; color: #3dd68c; font: 400 16px/1 "Lilita One", sans-serif; letter-spacing: .02em; text-align: center; }

/* My bets dialog */
.bets-dialog, .fair-dialog { width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 26px 24px 22px; border: 1px solid #2d333a; border-radius: 18px; background: #1c1f23; box-shadow: 0 30px 70px #000c; color: var(--text); overflow: auto; }
.bets-dialog::backdrop, .fair-dialog::backdrop { background: #0b0c0ecc; backdrop-filter: blur(6px); }
.bets-dialog[open], .fair-dialog[open] { animation: dialog-enter .18s ease-out both; }
.bets-dialog h2 { margin: 0 0 14px; font: 400 28px "Lilita One", sans-serif; }
.bets-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.bets-stat { display: grid; gap: 2px; padding: 11px 12px; border-radius: 12px; background: #23282d; }
.bets-stat span { color: #8f979e; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.bets-stat b { font: 400 19px/1.15 "Lilita One", sans-serif; }
.pos { color: #3dbe7e; } .neg { color: #ff8a92; }
.bets-scroll { max-height: 46vh; overflow: auto; border: 1px solid #2d333a; border-radius: 12px; }
.bets-dialog table { width: 100%; border-collapse: collapse; }
.bets-dialog th, .bets-dialog td { padding: 9px 12px; border-bottom: 1px solid #2d333a; text-align: left; font-size: 13px; white-space: nowrap; }
.bets-dialog th { position: sticky; top: 0; background: #23282d; color: #8f979e; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.bets-dialog tr:last-child td { border-bottom: 0; }
.bets-dialog td small { display: block; color: #6f7880; font-size: 11px; }
.bets-note { padding: 18px; color: #8f979e; text-align: center; }
.bets-fair { width: 100%; margin-top: 14px; padding: 12px; border: 1px solid #2d333a; border-radius: 10px; background: transparent; color: #8cc0ff; font: 700 13px var(--body); cursor: pointer; }
.bets-fair:hover { background: #23282d; }
@media (max-width: 560px) { .bets-stats { grid-template-columns: repeat(2, 1fr); } }

/* Provably fair dialog */
.fair-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; padding-right: 30px; }
.fair-icon { display: grid; flex: none; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--blue); box-shadow: 0 3px 0 #2a5c9f; color: #fff; }
.fair-icon svg { width: 26px; height: 26px; }
.fair-head h2 { margin: 0 0 4px; font: 400 28px/1.05 "Lilita One", sans-serif; }
.fair-head p { margin: 0; color: #9aa2a8; font-size: 13px; line-height: 1.55; }
.fair-tabs { display: flex; gap: 6px; margin-bottom: 16px; padding: 4px; border-radius: 12px; background: #15181b; }
.fair-tabs button { flex: 1; padding: 9px 8px; border: 0; border-radius: 9px; background: transparent; color: #8f979e; font: 400 14px "Lilita One", sans-serif; letter-spacing: .04em; cursor: pointer; }
.fair-tabs button.on { background: var(--blue); box-shadow: 0 2px 0 #2a5c9f; color: #fff; }
.fair-body { display: grid; gap: 12px; }
.fair-body h3 { margin: 8px 0 0; font: 400 19px "Lilita One", sans-serif; }
.fair-field { display: grid; gap: 6px; }
.fair-field > span { color: #8f979e; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.fair-value { display: flex; gap: 8px; }
.fair-value code, .fair-body input { flex: 1; min-width: 0; padding: 11px 13px; border: 1px solid #2d333a; border-radius: 10px; background: #15181b; color: #e6e9ec; font: 13px/1.4 ui-monospace, Menlo, Consolas, monospace; overflow-wrap: anywhere; outline: none; }
.fair-body input { width: 100%; }
.fair-body input:focus { border-color: var(--blue); }
.fair-value button, .fair-actions button { flex: none; padding: 0 14px; border: 0; border-radius: 10px; background: #2a3037; color: #e6e9ec; font: 700 13px var(--body); cursor: pointer; }
.fair-value button:hover:not(:disabled), .fair-actions button:hover { background: #343b43; }
.fair-value button:disabled, .fair-primary:disabled { opacity: .45; cursor: default; }
.fair-primary { padding: 12px; border: 0; border-radius: 10px; background: var(--blue); box-shadow: 0 3px 0 #2a5c9f; color: #fff; font: 400 15px "Lilita One", sans-serif; letter-spacing: .04em; cursor: pointer; }
.fair-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fair-stats div { display: grid; gap: 2px; padding: 12px; border-radius: 12px; background: #23282d; }
.fair-stats b { font: 400 24px/1.1 "Lilita One", sans-serif; }
.fair-stats span { color: #8f979e; font-size: 12px; }
.fair-note { margin: 0; color: #8f979e; font-size: 13px; line-height: 1.6; }
.fair-msg { margin: 0; color: #ff8a92; font-size: 13px; }
.fair-history { display: grid; gap: 8px; }
.fair-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; border-radius: 12px; background: #23282d; }
.fair-item b { display: block; font: 13px ui-monospace, Menlo, Consolas, monospace; }
.fair-item span { color: #8f979e; font-size: 12px; }
.fair-actions { display: flex; gap: 6px; }
.fair-actions button { height: 34px; }
.fair-table { display: grid; border: 1px solid #2d333a; border-radius: 12px; overflow: hidden; }
.fair-row { display: grid; grid-template-columns: 56px 1fr 1fr; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #2d333a; font: 12.5px ui-monospace, Menlo, Consolas, monospace; }
.fair-row.head { background: #23282d; color: #8f979e; font: 700 11px var(--body); letter-spacing: .06em; text-transform: uppercase; }
.fair-row:last-child { border-bottom: 0; }
.fair-out { display: grid; gap: 10px; }
.fair-steps { display: grid; gap: 12px; margin: 0; padding-left: 20px; color: #bbc1c4; font-size: 14px; line-height: 1.6; }
.fair-steps b { color: #fff; }
@media (max-width: 560px) { .fair-item { flex-direction: column; align-items: stretch; } .fair-actions { justify-content: flex-end; } .fair-value { flex-wrap: wrap; } }

/* Support reply pop-up (bottom right) */
.support-toast { position: fixed; z-index: 70; right: 20px; bottom: 20px; display: flex; align-items: center; gap: 12px; width: min(340px, calc(100vw - 32px)); padding: 13px 14px; border: 1px solid #2d333a; border-radius: 14px; background: #1f2327; box-shadow: 0 16px 40px #000a; color: #e6e9ec; cursor: pointer; animation: st-in .3s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes st-in { from { transform: translateY(16px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
.support-toast:hover { background: #23282d; }
.st-icon { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--blue); box-shadow: 0 3px 0 #2a5c9f; color: #fff; }
.st-icon svg { width: 20px; height: 20px; }
.st-copy { display: grid; min-width: 0; gap: 1px; }
.st-copy strong { font: 400 17px/1.1 "Lilita One", sans-serif; letter-spacing: .02em; }
.st-copy span { overflow: hidden; color: #9aa2a8; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.st-close { margin-left: auto; width: 26px; height: 26px; border: 0; border-radius: 8px; background: transparent; color: #8f979e; font-size: 20px; line-height: 1; cursor: pointer; }
.st-close:hover { background: #2a3037; color: #fff; }
@media (max-width: 760px) { .support-toast { right: 12px; bottom: 12px; } }

/* ===== Phone header: compact wallet pill, daily bonus / rakeback gift reachable ===== */
@media (max-width: 760px) {
  .virtual-credit-action:has(#bonus-trigger) { display: flex !important; }
  #bonus-trigger { width: 40px; height: 40px; border-radius: 11px; background: #22272c; }
  .topbar { gap: 6px !important; padding: 0 10px !important; }
  .wallet-center-wrap { flex: 0 1 auto !important; margin: 0 auto; gap: 4px; padding: 3px !important; width: auto; min-width: 0; }
  .wallet-swap { flex: none; min-width: 0 !important; padding: 0 7px !important; }
  .top-wallet { padding: 0 8px !important; }
  .wallet-add { padding: 0 9px !important; }
  .topbar-right { gap: 6px !important; }
}

/* Slide-in menu on phones: logo above Home. */
.sidebar .drawer-brand { display: none; }
@media (max-width: 760px) {
  .sidebar .drawer-brand { display: block !important; min-height: 0; margin: 4px 0 18px; padding: 4px 6px 0; }
  .sidebar .drawer-brand .brand-name { display: block !important; text-align: left; }
  .sidebar .drawer-brand .brand-name strong, .sidebar .drawer-brand .brand-name span { margin-left: 0; margin-right: 0; }
  .sidebar .drawer-brand .brand-name strong { font-size: 26px; }
  .sidebar .drawer-brand .brand-name span { font-size: 22px; }
}

.delivery-note { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #23282d; color: #c4cbd1; font-size: 13px; line-height: 1.45; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Live Wins icons: fixed square box so per-tile art rules can't distort them */
.lw-icon { display: flex; align-items: center; justify-content: center; height: 82px; overflow: hidden; }
.lw-card .lw-icon .live-art, .lw-card .lw-icon > svg { position: relative; top: auto; left: auto; transform: none; width: 78px; height: 78px; aspect-ratio: 1; flex: none; margin: 0; }
.lw-card .lw-icon .live-art > * { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.lw-card .lw-icon .live-art .coin-pair { position: absolute; inset: 0; width: 100%; height: 100%; }
.lw-card .lw-icon .live-art .coin-pair .live-art, .lw-card .lw-icon .live-art .coin-pair > * { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.lw-card .lw-icon .live-art > .wh-frame { inset: 0; }
.lw-card .lw-icon .live-art > .wh-pointer { inset: -2% auto auto 50% !important; width: 14% !important; height: auto !important; transform: translateX(-50%); z-index: 2; }
.lw-card .lw-icon .coin-pair > .live-art ~ .live-art { display: none; }

.top-wallet.game-view .wallet-icon { filter: hue-rotate(175deg) saturate(1.15) !important; }
.lw-card .lw-icon { overflow: visible; height: 88px; padding-top: 4px; }
.lw-card .lw-icon .live-art, .lw-card .lw-icon > svg { width: 76px; height: 76px; filter: drop-shadow(0 3px 0 #00000055); }
.lw-card .lw-icon .live-art > .wh-frame { inset: 0 !important; }
.lw-card .lw-icon .live-art > .wh-disc { inset: 3% !important; width: 94% !important; height: 94% !important; }
.lw-card[data-game="wheel"] .lw-icon .live-art > .wh-frame { inset: 0 !important; width: 100% !important; height: 100% !important; }
.lw-card[data-game="wheel"] .lw-icon .live-art > .wh-disc { inset: 3% !important; width: 94% !important; height: 94% !important; }
.lw-card[data-game="wheel"] .lw-icon .live-art > .wh-pointer { inset: -5% auto auto 50% !important; width: 15% !important; }
/* Wheel: same geometry as the real game (frame and disc share one 400x400 box) */
.lw-card[data-game="wheel"] .lw-icon .live-art > .wh-disc { inset: 0 !important; width: 100% !important; height: 100% !important; }
.lw-card[data-game="wheel"] .lw-icon .live-art > .wh-pointer { inset: -3% auto auto 50% !important; width: 11% !important; margin-left: -5.5%; transform: none; }
.lw-card[data-game="wheel"] .lw-icon .live-art { width: 82px; height: 82px; }

/* Live Wins: clickable player with rank + badge icons */
.lw-who { width: 100%; padding: 2px 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.lw-who:hover .lw-user { color: #fff; text-decoration: underline; }
.lw-who .rank-ico { flex: none; display: inline-flex; width: 15px; height: 17px; color: var(--rk); }
.lw-who .rank-ico svg, .rank-ico svg { width: 100%; height: 100%; }
.lw-badge { flex: none; display: inline-flex; }
.lw-badge .bdg-medal { width: 18px; height: 18px; padding: 3px; box-shadow: none; animation: none; }
.lw-badge .bdg-medal svg { width: 11px; height: 11px; }
.lw-badge .bdg-medal::after { display: none; }
.profile-dialog { max-width: 380px; }
.pf-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.pf-head h2 { margin: 0; font: 400 24px "Lilita One", sans-serif; }
.pf-head .rank-ico.big { width: 46px; height: 52px; color: var(--rk); }
.pf-rank { color: var(--rk); font-weight: 700; font-size: 13px; }
.pf-badge { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 10px 12px; border-radius: 12px; background: #262b31; }
.pf-badge .bdg-medal { flex: none; width: 44px; height: 44px; }
.pf-badge strong { display: block; color: #fff; font: 400 16px "Lilita One", sans-serif; }
.pf-badge small { color: #8d969e; }
.pf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pf-stat { display: grid; gap: 3px; padding: 10px 6px; border-radius: 10px; background: #262b31; text-align: center; }
.pf-stat b { color: #fff; font: 400 15px "Lilita One", sans-serif; }
.pf-stat small { color: #8d969e; font-size: 11px; }

/* Credits page: calmer price size + custom amount */
.credit-price { font-size: 32px; margin: 6px 0 14px; }
.credit-price span { font-size: 15px; }
.credit-card-featured .credit-price { font-size: 36px; }
@media (max-width: 700px) { .credit-price { font-size: 28px; } }
.credit-custom { display: grid; grid-template-columns: minmax(180px, 250px) 1fr auto; grid-template-areas: "copy copy copy" "field total buy" "hint hint hint"; align-items: center; gap: 12px 18px; margin-top: 14px; padding: 18px 22px; border: 1px solid #2a2f35; border-radius: 14px; background: #1c2024; }
.cc-copy { grid-area: copy; display: grid; gap: 3px; min-width: 0; }
.cc-copy strong { font: 400 20px/1.1 "Lilita One", sans-serif; }
.cc-copy span { color: #8d969e; font-size: 12.5px; line-height: 1.4; }
.cc-field { grid-area: field; display: flex; align-items: center; gap: 9px; width: 100%; height: 46px; padding: 0 14px; border: 2px solid #2c333b; border-radius: 11px; background: #15181b; transition: border-color .12s, box-shadow .12s; }
.cc-field:focus-within { border-color: var(--blue); }
.cc-field .coin-icon { flex: none; width: 22px; height: 22px; }
.cc-field input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; color: #fff; font: 400 20px "Lilita One", sans-serif; outline: 0; }
.cc-field input::placeholder { color: #566069; }
.cc-field em { color: #6f7982; font-size: 12px; font-style: normal; }
.cc-total { grid-area: total; display: grid; gap: 2px; min-width: 92px; text-align: left; }
.cc-total small { color: #8d969e; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.cc-total b { color: #fff; font: 400 26px/1 "Lilita One", sans-serif; }
.credit-custom .credit-button { grid-area: buy; width: 170px; height: 46px; border-radius: 10px; background: var(--blue); box-shadow: inset 0 -3px 0 #2a5c9f; font: 700 13px var(--body); }
.credit-custom .credit-button:disabled { background: #2d343c; box-shadow: none; color: #8a939b; cursor: not-allowed; }
.cc-hint { grid-area: hint; margin: 0; color: #6f7982; font-size: 12px; }
.cc-hint.error { color: #ff8a92; }
@media (max-width: 640px) { .credit-custom { grid-template-columns: 1fr 1fr; grid-template-areas: "copy copy" "field total" "buy buy" "hint hint"; } .credit-custom .credit-button { width: 100%; } }

.notification-item.settled { animation: none; }

/* Header chat button: same size and weight as the other icons */
.dm-top svg { width: 19px; height: 19px; opacity: .85; }
.order-protect { display: block; margin-top: 3px; color: #8be5b8; font-size: 11.5px; font-weight: 600; }
.order-protect.refunded { color: #f2c14e; }
.order-report { margin-left: 6px; color: #b3bbc2; }

/* Live Wins: bigger rank shield, and the badge medal looks exactly like in the Badges screen (just smaller) */
.lw-who { gap: 7px; align-items: center; }
.lw-who .rank-ico { width: 21px; height: 24px; filter: drop-shadow(0 2px 0 #0005); }
.lw-badge { align-self: center; }
.lw-badge .bdg-medal { width: 26px; height: 26px; padding: 0; box-shadow: 0 3px 0 var(--edge), inset 0 0 0 2.5px #ffffff33; animation: none; transform: none; }
.lw-badge .bdg-medal::after { display: block; top: 4px; left: 5px; width: 8px; height: 4px; }
.lw-badge .bdg-medal svg { width: 14px; height: 14px; stroke-width: 2.8; }
.lw-card:hover .lw-badge .bdg-medal { transform: none; }

/* Email verification */
.verify-banner { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 9px 16px; background: #2a3a55; color: #d6e6ff; font-size: 13px; font-weight: 600; }
.verify-banner[hidden] { display: none; }
.verify-banner button { padding: 5px 14px; border: 0; border-radius: 8px; background: #4d8ee7; box-shadow: 0 2px 0 #2a5c9f; color: #fff; font: 400 14px "Lilita One", sans-serif; letter-spacing: .02em; cursor: pointer; }
.verify-dialog { max-width: 400px; }
.verify-dialog h2 { margin: 0 0 6px; font: 400 26px "Lilita One", sans-serif; }
.vf-sub { margin: 0 0 14px; color: #8d969e; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.vf-row { margin-bottom: 12px; }
.vf-send, .vf-confirm { width: 100%; min-height: 44px; border: 0; border-radius: 11px; background: #2c333b; box-shadow: 0 3px 0 #171b1f; color: #e6e9ec; font: 400 16px "Lilita One", sans-serif; letter-spacing: .02em; cursor: pointer; }
.vf-send:disabled, .vf-confirm:disabled { opacity: .55; cursor: default; }
.vf-confirm { margin-top: 10px; background: #4d8ee7; box-shadow: 0 3px 0 #2a5c9f; color: #fff; }
.vf-code { width: 100%; height: 52px; padding: 0 14px; border: 2px solid #2c333b; border-radius: 11px; background: #15181b; color: #fff; text-align: center; letter-spacing: .4em; font: 600 24px ui-monospace, Consolas, monospace; outline: 0; }
.vf-code:focus { border-color: #4d8ee7; }
.vf-msg { display: none; margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #44d08c1c; color: #8be5b8; font-size: 12.5px; }
.vf-msg.show { display: block; } .vf-msg.bad { background: #e5484d1f; color: #ff9aa0; }
.sd-debt { color: #ff9aa0 !important; font-weight: 600; }

/* Live Wins chips: compact, rank and badge the same visual weight as the username */
.lw-who { gap: 6px; }
.lw-who .rank-ico { width: 15px; height: 17px; filter: drop-shadow(0 1px 0 #0006); }
.lw-badge .bdg-medal { width: 18px; height: 18px; box-shadow: 0 2px 0 var(--edge), inset 0 0 0 1.5px #ffffff33; }
.lw-badge .bdg-medal::after { top: 2px; left: 3px; width: 5px; height: 3px; }
.lw-badge .bdg-medal svg { width: 10px; height: 10px; stroke-width: 3; }

/* Edit profile */
.profile-popover > button.profile-edit:hover { background: #2c333b; color: #fff; }
.profile-popover > button.profile-edit[hidden] { display: none; }
.profile-edit-dialog { max-width: 400px; }
.profile-edit-dialog h2 { margin: 0 0 14px; font: 400 26px "Lilita One", sans-serif; }
.pe-field { display: grid; gap: 6px; margin-bottom: 8px; }
.pe-field > span { color: #c3cad0; font-size: 12px; font-weight: 700; }
.pe-input { width: 100%; height: 46px; padding: 0 14px; border: 2px solid #2c333b; border-radius: 11px; background: #15181b; color: #fff; font: 500 15px "DM Sans", sans-serif; outline: 0; transition: border-color .12s, box-shadow .12s; }
.pe-input:focus { border-color: #4d8ee7; }
.pe-input:disabled { opacity: .55; }
.pe-hint { margin: 0 0 14px; color: #7f8991; font-size: 12.5px; line-height: 1.5; }
.pe-save { width: 100%; min-height: 46px; border: 0; border-radius: 11px; background: #4d8ee7; box-shadow: 0 3px 0 #2a5c9f; color: #fff; font: 400 17px "Lilita One", sans-serif; letter-spacing: .02em; cursor: pointer; }
.pe-save:disabled { background: #2d343c; box-shadow: none; color: #8a939b; cursor: not-allowed; }
.pe-msg { display: none; margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #44d08c1c; color: #8be5b8; font-size: 12.5px; }
.pe-msg.show { display: block; } .pe-msg.bad { background: #e5484d1f; color: #ff9aa0; }
.profile-popover > button svg { flex: none; width: 17px; height: 17px; }

.pe-picture { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 16px; }
.pe-avatar-btn { position: relative; width: 96px; height: 96px; padding: 0; border: 0; border-radius: 50%; overflow: hidden; background: #2a2f34; cursor: pointer; display: grid; place-items: center; }
.pe-avatar-btn .pe-avatar { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pe-avatar-btn .pe-initial { font: 400 40px "Lilita One", sans-serif; color: #fff; }
.pe-avatar-btn .pe-cam { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10, 12, 14, .62); color: #fff; opacity: 0; transition: opacity .18s ease; }
.pe-avatar-btn .pe-cam svg { width: 34px; height: 34px; transform: scale(.7); transition: transform .22s cubic-bezier(.3, 1.4, .5, 1); }
.pe-avatar-btn:hover .pe-cam, .pe-avatar-btn:focus-visible .pe-cam { opacity: 1; }
.pe-avatar-btn:hover .pe-cam svg, .pe-avatar-btn:focus-visible .pe-cam svg { transform: scale(1); }
.pe-avatar-btn:focus-visible { outline: 2px solid #7eb1f3; outline-offset: 3px; }
.pe-remove { background: none; border: 0; color: #ff8a92; font-weight: 700; font-size: 12px; cursor: pointer; }

.pe-badges { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 6px; padding: 14px 14px 18px; border-radius: 12px; background: #15181a; }
.pe-badge { position: relative; display: grid; place-items: center; width: 54px; height: 54px; padding: 0; border: 0; border-radius: 14px; background: #2a2f34; box-shadow: 0 4px 0 #0007; cursor: pointer; outline: none; transition: background .15s, transform .12s, box-shadow .12s; }
.pe-badge .bdg-medal { width: 34px; height: 34px; }
.pe-badge:hover, .pe-badge:focus-visible { background: #363c42; transform: translateY(-2px); box-shadow: 0 6px 0 #0007; }
.pe-badge:active { transform: translateY(2px); box-shadow: 0 2px 0 #0007; }
.pe-badge.on, .pe-badge.on:hover { background: #4d8ee7; box-shadow: 0 4px 0 #2a5c9f; }
.pe-tip { position: fixed; inset: auto; margin: 0; overflow: visible; z-index: 50; opacity: 0; transform: translateY(8px) scale(.94); transition: opacity .18s ease, transform .26s cubic-bezier(.3, 1.4, .5, 1), overlay .26s allow-discrete, display .26s allow-discrete; gap: 2px; width: max-content; max-width: 220px; padding: 10px 14px; border: 0; border-radius: 12px; background: #2a2f34; box-shadow: 0 4px 0 #0007; text-align: left; pointer-events: none; }
.pe-tip strong { color: #fff; font: 400 16px "Lilita One", sans-serif; letter-spacing: .01em; }
.pe-tip span { color: #c3c9cd; font-size: 12px; font-weight: 600; line-height: 1.35; }
.pe-badge .bdg-medal { box-shadow: 0 3px 0 var(--edge), inset 0 0 0 3px #ffffff33; transform: translateY(-1.5px); }
.pe-badge:hover .bdg-medal { transform: translateY(-1.5px); }
.pe-badge-name { display: block; color: #99a0a2; font-size: 11px; }
.profile-edit-dialog .pe-field > span:first-child { display: block; }

.pe-tip:popover-open { display: grid; opacity: 1; transform: none; }
@starting-style { .pe-tip:popover-open { opacity: 0; transform: translateY(8px) scale(.94); } }
.pe-badge.on .bdg-medal { animation: pe-pop .42s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pe-pop { 0% { transform: translateY(-1.5px) scale(.7) rotate(-14deg); } 100% { transform: translateY(-1.5px) scale(1) rotate(0); } }
.pe-badge { transition: background .22s ease, box-shadow .22s ease, transform .15s ease; }
@media (prefers-reduced-motion: reduce) { .pe-tip, .pe-badge, .pe-badge .bdg-medal { transition: none; animation: none; } }

/* Toasts: chunky cartoony cards that match the buttons and badges. */
.toast { --toast-accent: #4d8ee7; --toast-edge: #2a5c9f; z-index: 200; gap: 12px; padding: 10px 18px 10px 10px; border: 0; border-radius: 16px; background: #2a2f34; box-shadow: 0 5px 0 #0009, 0 14px 28px #0006; transform: translate(-50%, 24px) scale(.9); transition: opacity .18s ease, transform .38s cubic-bezier(.3, 1.5, .5, 1); }
.toast.show { transform: translate(-50%, 0) scale(1); }
.toast[data-tone="success"] { --toast-accent: #2fb872; --toast-edge: #1b7a4b; }
.toast[data-tone="error"] { --toast-accent: #e5484d; --toast-edge: #9c2a30; }
.toast[data-tone="info"] { --toast-accent: #4d8ee7; --toast-edge: #2a5c9f; }
.toast-icon, .toast[data-tone="success"] .toast-icon, .toast[data-tone="error"] .toast-icon { width: 38px; height: 38px; border-radius: 50%; background: var(--toast-accent); color: #fff; box-shadow: 0 3px 0 var(--toast-edge), inset 0 0 0 3px #ffffff2e; }
.toast-symbol { width: 22px; height: 22px; stroke-width: 2.8; }
.toast.show .toast-icon { animation: toast-pop .45s cubic-bezier(.3, 1.6, .5, 1) .08s both; }
@keyframes toast-pop { from { transform: scale(.4) rotate(-20deg); } to { transform: none; } }
.toast-copy { gap: 2px; }
.toast-copy strong { color: var(--toast-accent); font: 400 15px/1 "Lilita One", sans-serif; letter-spacing: .02em; text-transform: none; filter: brightness(1.15); }
.toast-copy > span { color: #e6e9ec; font: 600 13px/1.3 var(--body); }

.rank-title .rank-perk { display: block; width: max-content; margin: 8px 0 0; vertical-align: baseline; }
.tip-wallet-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; border: 1px solid #2d333a; border-radius: 10px; background: #121417; }
.tip-wallet-toggle button { height: 34px; border: 0; border-radius: 7px; background: transparent; color: #8a929a; font: 700 13px var(--body); cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.tip-wallet-toggle button:hover { color: #fff; }
.tip-wallet-toggle button.active { background: #4d8ee7; color: #fff; box-shadow: inset 0 -2px 0 #2a5c9f; }

/* Rank panels: calmer, more readable label fonts. */
.rank-panels .rank-panel .rank-title span { font: 700 11px/1 var(--body); letter-spacing: .1em; color: #9db4cc; }
.rank-panels .rank-panel .rank-next { font: 600 12px/1 var(--body); letter-spacing: .02em; text-transform: none; color: #9db4cc; }
.rank-panels .rank-panel .rank-value small { font: 600 13px/1 var(--body); letter-spacing: 0; text-transform: none; color: #9db4cc; }
.rank-panels .rank-panel .rank-ladder li, .rank-panels .rank-panel .rank-ladder li b { font-family: var(--body); letter-spacing: 0; }

.tip-popover { width: 380px; }
.tip-currency-toggle { grid-template-columns: repeat(3, 1fr) !important; width: 216px !important; }
.tip-currency-toggle button { padding: 0 !important; }
@media (max-width: 480px) { .tip-popover { width: min(380px, calc(100vw - 24px)); } }

.lb-av { position: relative; display: grid; flex: none; width: 24px; height: 24px; margin: 0 3px; place-items: center; overflow: hidden; border-radius: 50%; background: #2f353b; color: #fff; font: 400 12px "Lilita One", sans-serif; }
.lb-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lb-av { overflow: visible; }
.lb-av img { border-radius: 50%; }
.avatar-button[class*="fr-"] { margin: 0 4px; }

.pe-frames { display: flex; gap: 10px; overflow-x: auto; padding: 10px 6px 14px; margin: 6px 0 2px; border-radius: 12px; background: #15181a; scrollbar-width: thin; }
.pe-frame { display: grid; flex: none; justify-items: center; gap: 7px; width: 64px; padding: 9px 4px 7px; border: 0; border-radius: 12px; background: #22262a; box-shadow: 0 4px 0 #0007; color: #c3c9cd; cursor: pointer; transition: background .2s ease, transform .15s ease, box-shadow .2s ease; }
.pe-frame:hover { background: #2c3238; transform: translateY(-2px); }
.pe-frame.picked { background: #4d8ee7; box-shadow: 0 4px 0 #2a5c9f; color: #fff; }
.pe-frame small { max-width: 100%; overflow: hidden; font: 700 10px/1 var(--body); text-overflow: ellipsis; white-space: nowrap; }
.pe-frame.locked .pe-fr-prev { opacity: .75; }
.pe-fr-prev { position: relative; display: grid; width: 34px; height: 34px; margin: 4px 0 2px; place-items: center; border-radius: 50%; background: #3a4149; color: #fff; font: 400 16px "Lilita One", sans-serif; }
.pe-fr-prev img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.pe-frame-info { display: grid; margin-top: 6px; }
.pe-frame-info small { color: #99a0a2; font-size: 11px; }
.pe-frame-act { width: 100%; margin: 0; }

/* ---- Avatar frames v2: masked gradient ring (::before) + SVG ornaments (::after). ---- */
.fr-ocean,.fr-ruby,.fr-gold,.fr-neon,.fr-rainbow,.fr-flame,.fr-royal { position: relative; overflow: visible !important; box-shadow: none !important; animation: none; }
.fr-ocean::before,.fr-ruby::before,.fr-gold::before,.fr-neon::before,.fr-rainbow::before,.fr-flame::before,.fr-royal::before { position: absolute; inset: -4px; z-index: 1; border-radius: 50%; content: ''; pointer-events: none; -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 3px), #000 calc(100% - 2.5px)); mask: radial-gradient(farthest-side, #0000 calc(100% - 3px), #000 calc(100% - 2.5px)); }
.fr-ocean::after,.fr-ruby::after,.fr-gold::after,.fr-neon::after,.fr-rainbow::after,.fr-flame::after,.fr-royal::after { position: absolute; inset: -30%; z-index: 2; content: ''; pointer-events: none; background: center / 100% 100% no-repeat; }
.fr-ocean::before { background: conic-gradient(#4d8ee7,#9fd0ff,#2a5c9f,#4d8ee7); }
.fr-ocean::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 160 160%22%3E%3Cdefs%3E%3C/defs%3E%3Ccircle cx=%2234%22 cy=%2240%22 r=%226%22 fill=%22%239fd0ff%22 fill-opacity=%22.85%22 stroke=%22%23fff%22 stroke-opacity=%22.8%22 stroke-width=%221.5%22/%3E%3Ccircle cx=%2222%22 cy=%2270%22 r=%224%22 fill=%22%239fd0ff%22 fill-opacity=%22.85%22 stroke=%22%23fff%22 stroke-opacity=%22.8%22 stroke-width=%221.5%22/%3E%3Ccircle cx=%22130%22 cy=%2234%22 r=%227%22 fill=%22%239fd0ff%22 fill-opacity=%22.85%22 stroke=%22%23fff%22 stroke-opacity=%22.8%22 stroke-width=%221.5%22/%3E%3Ccircle cx=%22140%22 cy=%2264%22 r=%224%22 fill=%22%239fd0ff%22 fill-opacity=%22.85%22 stroke=%22%23fff%22 stroke-opacity=%22.8%22 stroke-width=%221.5%22/%3E%3Ccircle cx=%2246%22 cy=%22126%22 r=%225%22 fill=%22%239fd0ff%22 fill-opacity=%22.85%22 stroke=%22%23fff%22 stroke-opacity=%22.8%22 stroke-width=%221.5%22/%3E%3Ccircle cx=%22118%22 cy=%22130%22 r=%226%22 fill=%22%239fd0ff%22 fill-opacity=%22.85%22 stroke=%22%23fff%22 stroke-opacity=%22.8%22 stroke-width=%221.5%22/%3E%3Ccircle cx=%2280%22 cy=%22148%22 r=%223%22 fill=%22%239fd0ff%22 fill-opacity=%22.85%22 stroke=%22%23fff%22 stroke-opacity=%22.8%22 stroke-width=%221.5%22/%3E%3C/svg%3E"); }
.fr-ruby::before { background: conic-gradient(#ff5d6c,#8f1d2a,#ff9aa3,#8f1d2a,#ff5d6c); }
.fr-ruby::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 160 160%22%3E%3Cdefs%3E%3C/defs%3E%3Cg transform=%22rotate%280.0 80 80%29%22%3E%3Cpolygon points=%2280%2C10 88%2C21 80%2C32 72%2C21%22 fill=%22%23ff5d6c%22 stroke=%22%238f1d2a%22 stroke-width=%222.5%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2280%2C10 88%2C21 80%2C21%22 fill=%22%23ffb3bb%22/%3E%3C/g%3E%3Cg transform=%22rotate%2890.0 80 80%29%22%3E%3Cpolygon points=%2280%2C10 88%2C21 80%2C32 72%2C21%22 fill=%22%23ff5d6c%22 stroke=%22%238f1d2a%22 stroke-width=%222.5%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2280%2C10 88%2C21 80%2C21%22 fill=%22%23ffb3bb%22/%3E%3C/g%3E%3Cg transform=%22rotate%28180.0 80 80%29%22%3E%3Cpolygon points=%2280%2C10 88%2C21 80%2C32 72%2C21%22 fill=%22%23ff5d6c%22 stroke=%22%238f1d2a%22 stroke-width=%222.5%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2280%2C10 88%2C21 80%2C21%22 fill=%22%23ffb3bb%22/%3E%3C/g%3E%3Cg transform=%22rotate%28270.0 80 80%29%22%3E%3Cpolygon points=%2280%2C10 88%2C21 80%2C32 72%2C21%22 fill=%22%23ff5d6c%22 stroke=%22%238f1d2a%22 stroke-width=%222.5%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2280%2C10 88%2C21 80%2C21%22 fill=%22%23ffb3bb%22/%3E%3C/g%3E%3C/svg%3E"); }
.fr-gold::before { background: conic-gradient(#ffe27a,#c48f0b,#fff2a8,#c48f0b,#ffe27a); }
.fr-gold::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 160 160%22%3E%3Cdefs%3E%3C/defs%3E%3Cpath d=%22M58 32 L62 8 L74 21 L80 3 L86 21 L98 8 L102 32 Z%22 fill=%22%23ffd23a%22 stroke=%22%23a87b05%22 stroke-width=%222.5%22 stroke-linejoin=%22round%22/%3E%3Ccircle cx=%2280%22 cy=%224%22 r=%223.5%22 fill=%22%23fff2a8%22/%3E%3Ccircle cx=%2262%22 cy=%228%22 r=%223%22 fill=%22%23fff2a8%22/%3E%3Ccircle cx=%2298%22 cy=%228%22 r=%223%22 fill=%22%23fff2a8%22/%3E%3C/svg%3E"); }
.fr-neon::before { background: conic-gradient(#3dffb0,#0b7a55,#3dffb0,#0b7a55,#3dffb0); }
.fr-neon::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 160 160%22%3E%3Cdefs%3E%3C/defs%3E%3Cpath d=%22M80 4 L84 20 L100 24 L84 28 L80 44 L76 28 L60 24 L76 20 Z%22 fill=%22%233dffb0%22/%3E%3Cg transform=%22rotate%28180 80 80%29%22%3E%3Cpath d=%22M80 4 L84 20 L100 24 L84 28 L80 44 L76 28 L60 24 L76 20 Z%22 fill=%22%233dffb0%22/%3E%3C/g%3E%3C/svg%3E"); }
.fr-rainbow::before { background: conic-gradient(#ff5f6d,#ffc933,#3dd88a,#4d8ee7,#9a7cf0,#ff5f6d); }
.fr-rainbow::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 160 160%22%3E%3Cdefs%3E%3C/defs%3E%3Cg transform=%22translate%28100 24%29 scale%28.5%29%22%3E%3Cpath d=%22M80 4 L84 20 L100 24 L84 28 L80 44 L76 28 L60 24 L76 20 Z%22 fill=%22%23fff%22/%3E%3C/g%3E%3Cg transform=%22translate%2814 112%29 scale%28.4%29%22%3E%3Cpath d=%22M80 4 L84 20 L100 24 L84 28 L80 44 L76 28 L60 24 L76 20 Z%22 fill=%22%23fff%22/%3E%3C/g%3E%3C/svg%3E"); }
.fr-flame::before { background: conic-gradient(#ff3d1f,#ffd24a,#ff8a1f,#ff3d1f); }
.fr-flame::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 160 160%22%3E%3Cdefs%3E%3ClinearGradient id=%22f%22 x1=%220%22 y1=%221%22 x2=%220%22 y2=%220%22%3E%3Cstop offset=%220%22 stop-color=%22%23ff3d1f%22/%3E%3Cstop offset=%22.6%22 stop-color=%22%23ff8a1f%22/%3E%3Cstop offset=%221%22 stop-color=%22%23ffd24a%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform=%22rotate%28-70 80 80%29%22%3E%3Cpath d=%22M80 34 C68 22 74 12 80 -2 C86 12 92 22 80 34 Z%22 fill=%22url%28%23f%29%22/%3E%3C/g%3E%3Cg transform=%22rotate%28-45 80 80%29%22%3E%3Cpath d=%22M80 34 C68 22 74 12 80 -2 C86 12 92 22 80 34 Z%22 fill=%22url%28%23f%29%22/%3E%3C/g%3E%3Cg transform=%22rotate%28-22 80 80%29%22%3E%3Cpath d=%22M80 34 C68 22 74 12 80 -2 C86 12 92 22 80 34 Z%22 fill=%22url%28%23f%29%22/%3E%3C/g%3E%3Cg transform=%22rotate%280 80 80%29%22%3E%3Cpath d=%22M80 34 C68 22 74 12 80 -2 C86 12 92 22 80 34 Z%22 fill=%22url%28%23f%29%22/%3E%3C/g%3E%3Cg transform=%22rotate%2822 80 80%29%22%3E%3Cpath d=%22M80 34 C68 22 74 12 80 -2 C86 12 92 22 80 34 Z%22 fill=%22url%28%23f%29%22/%3E%3C/g%3E%3Cg transform=%22rotate%2845 80 80%29%22%3E%3Cpath d=%22M80 34 C68 22 74 12 80 -2 C86 12 92 22 80 34 Z%22 fill=%22url%28%23f%29%22/%3E%3C/g%3E%3Cg transform=%22rotate%2870 80 80%29%22%3E%3Cpath d=%22M80 34 C68 22 74 12 80 -2 C86 12 92 22 80 34 Z%22 fill=%22url%28%23f%29%22/%3E%3C/g%3E%3C/svg%3E"); }
.fr-royal::before { background: conic-gradient(#9a7cf0,#ffd23a,#9a7cf0,#ffd23a,#9a7cf0); }
.fr-royal::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 160 160%22%3E%3Cdefs%3E%3ClinearGradient id=%22w%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff6c8%22/%3E%3Cstop offset=%221%22 stop-color=%22%23ffc933%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d=%22M30 84 C6 76 -2 52 6 28 C18 40 28 44 40 48 C26 52 24 62 34 70 C24 70 22 78 34 84 Z%22 fill=%22url%28%23w%29%22 stroke=%22%23caa94a%22 stroke-width=%222.5%22 stroke-linejoin=%22round%22/%3E%3Cg transform=%22translate%28160 0%29 scale%28-1 1%29%22%3E%3Cpath d=%22M30 84 C6 76 -2 52 6 28 C18 40 28 44 40 48 C26 52 24 62 34 70 C24 70 22 78 34 84 Z%22 fill=%22url%28%23w%29%22 stroke=%22%23caa94a%22 stroke-width=%222.5%22 stroke-linejoin=%22round%22/%3E%3C/g%3E%3Cpath d=%22M58 32 L62 8 L74 21 L80 3 L86 21 L98 8 L102 32 Z%22 fill=%22%23b49cff%22 stroke=%22%234a2fa0%22 stroke-width=%222.5%22 stroke-linejoin=%22round%22/%3E%3Ccircle cx=%2280%22 cy=%224%22 r=%223.5%22 fill=%22%23ffd23a%22/%3E%3Ccircle cx=%2262%22 cy=%228%22 r=%223%22 fill=%22%23ffd23a%22/%3E%3Ccircle cx=%2298%22 cy=%228%22 r=%223%22 fill=%22%23ffd23a%22/%3E%3C/svg%3E"); }
.fr-neon::before { filter: drop-shadow(0 0 4px #3dffb0); animation: fr-pulse 1.6s ease-in-out infinite; }
.fr-rainbow::before { animation: fr-spin 3s linear infinite; }
.fr-ruby::before, .fr-royal::before { animation: fr-spin 8s linear infinite; }
.fr-gold::before { filter: drop-shadow(0 0 3px #ffc93399); }
.fr-flame::before { animation: fr-spin 4s linear infinite; filter: drop-shadow(0 0 5px #ff5a1f); }
.fr-flame::after { transform-origin: 50% 60%; animation: fr-flicker .9s ease-in-out infinite alternate; }
.fr-royal::after { filter: drop-shadow(0 2px 2px #0006); }
.fr-ocean::after { animation: fr-float 3s ease-in-out infinite; }
@keyframes fr-spin { to { transform: rotate(360deg); } }
@keyframes fr-pulse { 50% { opacity: .55; } }
@keyframes fr-flicker { from { transform: scale(1); opacity: .9; } to { transform: scale(1.06); opacity: 1; } }
@keyframes fr-float { 50% { transform: translateY(-4%); } }
@media (prefers-reduced-motion: reduce) { .fr-neon::before, .fr-rainbow::before, .fr-ruby::before, .fr-royal::before, .fr-flame::before, .fr-flame::after, .fr-ocean::after { animation: none; } }
.pf-pic { position: relative; display: block; flex: none; width: 34px; height: 34px; border-radius: 50%; }
.pf-pic img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #3b4047; }
.pf-pic img[hidden] { display: none; }
.pe-frames { gap: 12px !important; padding: 20px 10px 16px !important; scrollbar-width: none; cursor: grab; }
.pe-frames::-webkit-scrollbar { display: none; }
.pe-frame { width: 78px !important; }
.pe-fr-prev { width: 40px !important; height: 40px !important; margin: 6px 0 4px !important; }

.pe-coin { width: 14px; height: 14px; flex: none; filter: hue-rotate(175deg) saturate(1.15); }
.pe-price { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.pe-price .pe-coin { width: 13px; height: 13px; }
.pe-frame-act { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.pe-frame-act .pe-coin { width: 18px; height: 18px; margin-left: 2px; }

/* ---- Name colors (shop). Gradient text for the fancy ones. ---- */
.nc-mint { color: #5de6a8 !important; }
.nc-sky { color: #7eb1f3 !important; }
.nc-gold, .nc-aurora, .nc-shimmer, .nc-ember { -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; background-size: 200% 100%; }
.nc-gold { background-image: linear-gradient(90deg, #ffe27a, #ffc933, #c48f0b, #ffc933, #ffe27a); }
.nc-aurora { background-image: linear-gradient(90deg, #3dffb0, #4d8ee7, #9a7cf0, #ff6fb5, #3dffb0); animation: nc-slide 4s linear infinite; }
.nc-shimmer { background-image: linear-gradient(100deg, #9aa3ab 30%, #fff 50%, #9aa3ab 70%); animation: nc-slide 2.4s linear infinite; }
.nc-ember { background-image: linear-gradient(90deg, #ff3d1f, #ff8a1f, #ffd24a, #ff8a1f, #ff3d1f); animation: nc-slide 2s linear infinite; filter: drop-shadow(0 0 4px #ff5a1f88); }
.nc-glitch { color: #fff !important; text-shadow: -1.5px 0 #ff2e63, 1.5px 0 #08f7fe; animation: nc-glitch 2.2s steps(1) infinite; }
@keyframes nc-slide { to { background-position: -200% 0; } }
@keyframes nc-glitch { 0%, 90%, 100% { text-shadow: -1.5px 0 #ff2e63, 1.5px 0 #08f7fe; transform: none; } 92% { text-shadow: 3px 0 #ff2e63, -3px 0 #08f7fe; transform: translateX(1px); } 95% { text-shadow: -3px 0 #ff2e63, 3px 0 #08f7fe; transform: translateX(-1px); } }
@media (prefers-reduced-motion: reduce) { .nc-aurora, .nc-shimmer, .nc-ember, .nc-glitch { animation: none; } }
.pe-nc-prev { display: block; max-width: 100%; margin: 14px 0 12px; overflow: hidden; font: 400 15px/1 "Lilita One", sans-serif; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.pe-frame .bdg-medal { width: 34px; height: 34px; margin: 6px 0 4px; }

.pe-badge-name[hidden] { display: none; }
/* ---- Home shop ---- */
.home-shop { min-width: 0; margin: 8px 0 28px; }
.home-shop .home-heading { flex-wrap: wrap; }
.hs-sub { color: #8f979e; font-size: 13px; font-weight: 600; }
.hs-bal { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 7px 14px; border-radius: 99px; background: #2a2f34; box-shadow: 0 3px 0 #0007; color: #fff; font: 700 14px var(--body); }
.hs-bal small { color: #99a0a2; font-size: 11px; font-weight: 600; }
.hs-bal .pe-coin { width: 18px; height: 18px; }
.hs-tabs { display: flex; gap: 6px; width: max-content; max-width: 100%; margin: 14px 0; padding: 4px; overflow-x: auto; border-radius: 14px; background: #15181b; scrollbar-width: none; }
.hs-tab { flex: none; padding: 9px 18px; border: 0; border-radius: 10px; background: transparent; color: #8f979e; font: 400 15px "Lilita One", sans-serif; letter-spacing: .02em; cursor: pointer; transition: background .2s ease, color .2s ease; }
.hs-tab:hover { color: #fff; }
.hs-tab.on { background: #4d8ee7; box-shadow: 0 3px 0 #2a5c9f; color: #fff; }
.hs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.hs-card { display: grid; justify-items: center; gap: 10px; padding: 18px 12px 14px; border-radius: 18px; background: #22262a; box-shadow: 0 5px 0 #0007; transition: transform .15s ease, background .2s ease; }
.hs-card:hover { background: #292e33; transform: translateY(-3px); }
.hs-card.on { background: #1f2a3a; box-shadow: 0 5px 0 #2a5c9f; }
.hs-card strong { color: #fff; font: 400 17px/1 "Lilita One", sans-serif; }
.hs-prev { display: grid; place-items: center; width: 100%; height: 86px; }
.hs-av { position: relative; display: grid; width: 58px; height: 58px; place-items: center; border-radius: 50%; background: #3a4149; color: #fff; font: 400 24px "Lilita One", sans-serif; }
.hs-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.hs-nc { display: block; max-width: 100%; overflow: hidden; color: #fff; font: 400 22px/1.2 "Lilita One", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.hs-prev .bdg-medal { width: 56px; height: 56px; }
.hs-prev .bdg-medal svg { width: 30px; height: 30px; }
.hs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 38px; border: 0; border-radius: 11px; background: #4d8ee7; box-shadow: 0 4px 0 #2a5c9f; color: #fff; font: 400 16px "Lilita One", sans-serif; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, background .2s ease; }
.hs-btn:hover:not(:disabled) { background: #5a99ee; }
.hs-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #2a5c9f; }
.hs-btn.owned { background: #3a4149; box-shadow: 0 4px 0 #1d2124; }
.hs-btn.on { background: #2a2f34; box-shadow: none; color: #8f979e; cursor: default; }
.hs-btn .pe-coin { width: 20px; height: 20px; }
.hs-note { grid-column: 1 / -1; color: #99a0a2; font-weight: 600; }
@keyframes hs-in { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .hs-card { animation: none; } }

.hs-tabs { padding: 0; gap: 10px; background: transparent; overflow: visible; padding-bottom: 4px; }
.hs-tab { background: #2a2f34; box-shadow: 0 4px 0 #0007; color: #c3c9cd; transition: background .2s ease, color .2s ease, transform .12s ease, box-shadow .12s ease; }
.hs-tab:hover { background: #363c42; color: #fff; }
.hs-tab:active { transform: translateY(3px); box-shadow: 0 1px 0 #0007; }
.hs-tab.on { background: #4d8ee7; box-shadow: 0 4px 0 #2a5c9f; color: #fff; }

#rb-amount { display: inline-flex; align-items: center; justify-content: center; gap: .3em; }
#rb-amount .rb-coin { width: .8em; height: .8em; flex: none; filter: hue-rotate(175deg) saturate(1.15); }

#rb-amount { gap: 10px; line-height: 1; padding-top: 2px; }
#rb-amount .rb-coin { width: 38px; height: 38px; margin-top: -3px; }
.rb-kicker { padding: 6px 18px 7px; border-radius: 12px; background: #4d8ee7; box-shadow: 0 4px 0 #2a5c9f; color: #fff; font: 400 17px/1 "Lilita One", sans-serif; letter-spacing: .03em; text-transform: none; }

/* ---- Frames, round two: chunkier ring with a dark gap so the avatar pops. ---- */
.fr-ocean, .fr-ruby, .fr-gold, .fr-neon, .fr-rainbow, .fr-flame, .fr-royal { box-shadow: 0 0 0 2px #15181b !important; }
.fr-ocean::before, .fr-ruby::before, .fr-gold::before, .fr-neon::before, .fr-rainbow::before, .fr-flame::before, .fr-royal::before { inset: -6px; -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 5px), #000 calc(100% - 4.5px)); mask: radial-gradient(farthest-side, #0000 calc(100% - 5px), #000 calc(100% - 4.5px)); }
.fr-ocean::after, .fr-ruby::after, .fr-gold::after, .fr-neon::after, .fr-rainbow::after, .fr-flame::after, .fr-royal::after { inset: -34%; }

/* ---- Equipped badge medal, small version (menus, leaderboards, live bets). ---- */
.bdg-medal.mini { flex: none; width: 18px; height: 18px; padding: 0; box-shadow: 0 2px 0 var(--edge), inset 0 0 0 2px #ffffff33; animation: none; transform: none; vertical-align: middle; }
.bdg-medal.mini::after { display: none; }
.bdg-medal.mini svg { width: 58%; height: 58%; stroke-width: 3; filter: none; }
#profile-name { display: inline-flex; align-items: center; gap: 7px; }
.lb-user .bdg-medal.mini, .crash-live-name .bdg-medal.mini { margin-left: 2px; margin-bottom: 2px; }

/* ---- Live Wins: rank shield and badge now share one size and baseline. ---- */
.lw-who { align-items: center; gap: 7px; }
.lw-who .rank-ico { width: 16px; height: 18px; }
.lw-badge { display: inline-flex; align-items: center; align-self: center; }
.lw-badge .bdg-medal { width: 20px; height: 20px; padding: 0; box-shadow: 0 2px 0 var(--edge), inset 0 0 0 2px #ffffff33; transform: translateY(-1px); }
.lw-badge .bdg-medal::after { display: none; }
.lw-badge .bdg-medal svg { width: 11px; height: 11px; stroke-width: 3; }
.lw-card:hover .lw-badge .bdg-medal { transform: translateY(-1px); }

/* ---- Profile card header ---- */
.pf-head { align-items: center; gap: 16px; margin: 6px 0 16px; }
.pf-avatar { position: relative; display: grid; flex: none; width: 64px; height: 64px; margin: 6px; place-items: center; border-radius: 50%; background: #3a4149; color: #fff; font: 400 26px "Lilita One", sans-serif; }
.pf-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.pf-id { display: grid; gap: 4px; min-width: 0; }
.pf-namerow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pf-namerow h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-namerow .rank-ico { flex: none; width: 20px; height: 23px; color: var(--rk); }

/* ---- Badge medal fixes: keep its glyph colour, no clipping, no glow patch. ---- */
.bdg-medal.mini { color: var(--ink, #fff) !important; overflow: visible !important; }
.bdg-medal.mini::before, .bdg-medal.mini::after { display: none !important; content: none !important; }
.bdg-medal.mini svg { width: 60%; height: 60%; stroke: currentColor; }
.profile-summary strong#profile-name, .profile-summary strong { overflow: visible; padding-bottom: 3px; }
#profile-name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crash-live-name { overflow: visible !important; padding-bottom: 2px; }
.crash-live-name > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.rank-shield { flex: none; filter: drop-shadow(0 1px 0 #0006); }
.crash-live-name .rank-shield { margin-left: 1px; }
.pf-namerow .rank-ico { width: 24px; height: 27px; align-self: center; margin-top: 3px; }

.lw-amt { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.lw-amt .pe-coin { width: 17px; height: 17px; }
.pf-namerow .rank-ico { width: 28px; height: 31px; margin-top: 4px; }

/* ---- Profile menu: bigger username. ---- */
.profile-summary strong#profile-name { font: 400 18px/1.15 "Lilita One", sans-serif; letter-spacing: .01em; }
.profile-summary > div > span:not(.bdg-medal) { font-size: 12px; }
.profile-summary .bdg-medal.mini { width: 20px; height: 20px; }
.g-tip[popover]:popover-open { z-index: 2147483647; }
.pe-tip span[hidden] { display: none; }
#profile-name > span:first-child { font: inherit; font-size: inherit; letter-spacing: inherit; }
.profile-summary #profile-name > span:first-child:not([class*="nc-"]) { color: #fff; }

.crash-live-row.clickable, .crash-marker-avatar.clickable, .crash-tip-head.clickable { cursor: pointer; }
.crash-live-row.clickable:hover { background: #2c3238; }
.crash-marker, .crash-marker-tip { pointer-events: auto; }
/* No shine patch on big badge medals. */
.pf-badge .bdg-medal::after, .pe-badge .bdg-medal::after, .pe-frame .bdg-medal::after, .hs-prev .bdg-medal::after, .lw-badge .bdg-medal::after { display: none !important; }

/* ---- Live Wins cards, tidied: one rhythm, aligned player row, bigger amount pill. ---- */
.lw-card { align-content: start; gap: 10px !important; padding: 16px 14px 14px !important; }
.lw-card .lw-info { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.lw-card .lw-info b { font: 400 18px/1 "Lilita One", sans-serif; }
.lw-card .lw-info em { padding: 5px 9px; border-radius: 9px; font: 700 12px/1 var(--body); }
.lw-card .lw-who { display: flex; align-items: center; gap: 8px; width: 100%; height: 26px; padding: 0 !important; }
.lw-card .lw-user { max-width: 88px; overflow: hidden; font: 700 14px/1 var(--body); text-overflow: ellipsis; white-space: nowrap; }
.lw-card .lw-who .rank-ico { width: 16px; height: 18px; margin: 0; }
.lw-card .lw-badge { display: inline-flex; align-items: center; height: 22px; }
.lw-card .lw-badge .bdg-medal { width: 22px; height: 22px; transform: translateY(-1px) !important; }
.lw-card .lw-badge .bdg-medal svg { width: 60%; height: 60%; }
.lw-card .lw-amt { width: 100%; height: 38px; border-radius: 11px; font: 400 19px/1 "Lilita One", sans-serif; letter-spacing: .01em; }
.lw-card .lw-amt .pe-coin { width: 19px; height: 19px; }
.hs-card.on { background: #22262a; box-shadow: 0 5px 0 #0007; }
.hs-card.on:hover { background: #292e33; }

/* ---- Staff badge: red medal, only ever granted by hand. ---- */
.bdg-medal.staff { --c: #35c978; --edge: #1b7a4b; --ink: #fff; }

/* ---- Shop cards: smooth hover motion. ---- */
.hs-card { transition: transform .35s cubic-bezier(.3, 1.5, .5, 1), background .25s ease, box-shadow .25s ease; will-change: transform; }
.hs-card:hover { transform: translateY(-6px) scale(1.025); box-shadow: 0 11px 0 #0007, 0 18px 30px #0005; }
.hs-prev > * { transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.hs-card:hover .hs-prev > * { transform: scale(1.14) rotate(-4deg); }
.hs-card:hover .hs-nc { transform: scale(1.12); }
.hs-card strong { transition: color .25s ease, letter-spacing .3s ease; }
.hs-card:hover strong { letter-spacing: .03em; }
.hs-btn { transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), box-shadow .2s ease, background .2s ease; }
.hs-card:hover .hs-btn:not(:disabled) { transform: translateY(-1px); }
.hs-tab { transition: background .25s ease, color .25s ease, transform .25s cubic-bezier(.3, 1.6, .5, 1), box-shadow .2s ease; }
.hs-tab:hover { transform: translateY(-2px); }
.pe-frame { transition: background .25s ease, transform .3s cubic-bezier(.3, 1.6, .5, 1), box-shadow .2s ease; }
@media (prefers-reduced-motion: reduce) { .hs-card, .hs-prev > *, .hs-tab, .pe-frame { transition: none; } .hs-card:hover, .hs-card:hover .hs-prev > *, .hs-card:hover .hs-nc { transform: none; } }

/* ---- Staff badge: clean flat green medal, same family as the rest (no glow). ---- */
.bdg-medal.staff, .bdg-medal.mini.staff { --c: #35c978; --edge: #1b7a4b; --ink: #fff; animation: none; }
.bdg-medal.staff svg { filter: none; }
/* ---- Crash live bets: shields and badge on one even line. ---- */
.crash-live-name { align-items: center; gap: 5px; }
.crash-live-name .rank-shield { width: 14px; height: 16px; margin: 0; }
.crash-live-name .bdg-medal.mini { width: 18px; height: 18px; margin: 0 0 2px 1px; }

/* ---- Staff badge = a small red shield, same family as the wager / marketplace shields. ---- */
.staff-shield { display: inline-flex; flex: none; width: 16px; height: 18px; vertical-align: middle; filter: drop-shadow(0 1px 0 #0006); }
.staff-shield svg { display: block; width: 100%; height: 100%; }
.crash-live-name .staff-shield, .crash-live-name .rank-shield { width: 14px; height: 16px; margin: 0; }
.profile-summary .staff-shield { width: 18px; height: 20px; }
.lw-card .staff-shield { width: 16px; height: 18px; }
.pf-badge .staff-shield { width: 38px; height: 43px; }
.pe-badge .staff-shield, .pe-frame .staff-shield { width: 28px; height: 32px; }

.hs-none { display: grid; width: 58px; height: 58px; place-items: center; border: 3px dashed #4a5159; border-radius: 50%; color: #6b747c; font: 400 28px/1 "Lilita One", sans-serif; }
.hs-btn.none-label { }

/* ---- More avatar frames. ---- */
.fr-mint,.fr-sunset,.fr-cloud,.fr-candy,.fr-grape,.fr-frost,.fr-toxic,.fr-sakura,.fr-hearts,.fr-kitty,.fr-galaxy,.fr-halo,.fr-devil { position: relative; overflow: visible !important; box-shadow: 0 0 0 2px #15181b !important; animation: none; }
.fr-mint::before,.fr-sunset::before,.fr-cloud::before,.fr-candy::before,.fr-grape::before,.fr-frost::before,.fr-toxic::before,.fr-sakura::before,.fr-hearts::before,.fr-kitty::before,.fr-galaxy::before,.fr-halo::before,.fr-devil::before { position: absolute; inset: -6px; z-index: 1; border-radius: 50%; content: ''; pointer-events: none; -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 5px), #000 calc(100% - 4.5px)); mask: radial-gradient(farthest-side, #0000 calc(100% - 5px), #000 calc(100% - 4.5px)); }
.fr-mint::after,.fr-sunset::after,.fr-cloud::after,.fr-candy::after,.fr-grape::after,.fr-frost::after,.fr-toxic::after,.fr-sakura::after,.fr-hearts::after,.fr-kitty::after,.fr-galaxy::after,.fr-halo::after,.fr-devil::after { position: absolute; inset: -34%; z-index: 2; content: ''; pointer-events: none; background: center / 100% 100% no-repeat; }
.fr-mint::before { background: conic-gradient(#7dffc1,#2fbf76,#b5ffe0,#2fbf76,#7dffc1); }
.fr-mint::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 160 160%22%3E%3Cdefs%3E%3C/defs%3E%3Cg transform=%22rotate%28-45 80 80%29 translate%2880 20%29%22%3E%3Cpath d=%22M0 5 C-8 -1 -6 -11 0 -15 C6 -11 8 -1 0 5Z%22 fill=%22%2359d98b%22 stroke=%22%231f7a4a%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M0 4 V-9%22 stroke=%22%231f7a4a%22 stroke-width=%221.5%22 stroke-linecap=%22round%22/%3E%3C/g%3E%3Cg transform=%22rotate%2845 80 80%29 translate%2880 20%29%22%3E%3Cpath d=%22M0 5 C-8 -1 -6 -11 0 -15 C6 -11 8 -1 0 5Z%22 fill=%22%2359d98b%22 stroke=%22%231f7a4a%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M0 4 V-9%22 stroke=%22%231f7a4a%22 stroke-width=%221.5%22 stroke-linecap=%22round%22/%3E%3C/g%3E%3Cg transform=%22rotate%28135 80 80%29 translate%2880 20%29%22%3E%3Cpath d=%22M0 5 C-8 -1 -6 -11 0 -15 C6 -11 8 -1 0 5Z%22 fill=%22%2359d98b%22 stroke=%22%231f7a4a%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M0 4 V-9%22 stroke=%22%231f7a4a%22 stroke-width=%221.5%22 stroke-linecap=%22round%22/%3E%3C/g%3E%3Cg transform=%22rotate%28225 80 80%29 translate%2880 20%29%22%3E%3Cpath d=%22M0 5 C-8 -1 -6 -11 0 -15 C6 -11 8 -1 0 5Z%22 fill=%22%2359d98b%22 stroke=%22%231f7a4a%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M0 4 V-9%22 stroke=%22%231f7a4a%22 stroke-width=%221.5%22 stroke-linecap=%22round%22/%3E%3C/g%3E%3C/svg%3E"); }
.fr-sunset::before { background: conic-gradient(#ff9a3d,#ff5e8a,#a85cff,#ff5e8a,#ff9a3d); }
.fr-sunset::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 160 160%22%3E%3Cdefs%3E%3C/defs%3E%3Cg transform=%22rotate%2840 80 80%29 translate%2880 18%29%22%3E%3Cpath d=%22M0 -10 L2.500 -2.500 L10 0 L2.500 2.500 L0 10 L-2.500 2.500 L-10 0 L-2.500 -2.500Z%22 fill=%22%23fff3b0%22 transform=%22scale%281.1%29%22/%3E%3C/g%3E%3Cg transform=%22rotate%28220 80 80%29 translate%2880 18%29%22%3E%3Cpath d=%22M0 -10 L2.500 -2.500 L10 0 L2.500 2.500 L0 10 L-2.500 2.500 L-10 0 L-2.500 -2.500Z%22 fill=%22%23ffd2e6%22 transform=%22scale%280.8%29%22/%3E%3C/g%3E%3C/svg%3E"); }
.fr-cloud::before { background: conic-gradient(#cfe9ff,#7fb8f5,#fff,#7fb8f5,#cfe9ff); }
.fr-cloud::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 160 160%22%3E%3Cdefs%3E%3C/defs%3E%3Cg transform=%22rotate%28-35 80 80%29 translate%2880 18%29%22%3E%3Cg fill=%22%23fff%22 stroke=%22%239cc9f5%22 stroke-width=%222%22%3E%3Ccircle cx=%22-7%22 cy=%221%22 r=%226%22/%3E%3Ccircle cx=%221%22 cy=%22-3%22 r=%228%22/%3E%3Ccircle cx=%229%22 cy=%221%22 r=%226%22/%3E%3Crect x=%22-12%22 y=%222%22 width=%2226%22 height=%226%22 rx=%223%22 stroke=%22none%22/%3E%3C/g%3E%3C/g%3E%3Cg transform=%22rotate%28150 80 80%29 translate%2880 18%29%22%3E%3Cg fill=%22%23fff%22 stroke=%22%239cc9f5%22 stroke-width=%222%22%3E%3Ccircle cx=%22-7%22 cy=%221%22 r=%226%22/%3E%3Ccircle cx=%221%22 cy=%22-3%22 r=%228%22/%3E%3Ccircle cx=%229%22 cy=%221%22 r=%226%22/%3E%3Crect x=%22-12%22 y=%222%22 width=%2226%22 height=%226%22 rx=%223%22 stroke=%22none%22/%3E%3C/g%3E%3C/g%3E%3Cg transform=%22rotate%28215 80 80%29 translate%2880 18%29%22%3E%3Cg fill=%22%23fff%22 stroke=%22%239cc9f5%22 stroke-width=%222%22%3E%3Ccircle cx=%22-7%22 cy=%221%22 r=%226%22/%3E%3Ccircle cx=%221%22 cy=%22-3%22 r=%228%22/%3E%3Ccircle cx=%229%22 cy=%221%22 r=%226%22/%3E%3Crect x=%22-12%22 y=%222%22 width=%2226%22 height=%226%22 rx=%223%22 stroke=%22none%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.fr-candy::before { background: repeating-conic-gradient(#ff7eb6 0 12deg,#fff 12deg 24deg); }
.fr-candy::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 160 160%22%3E%3Cdefs%3E%3C/defs%3E%3Cg transform=%22rotate%280 80 80%29 translate%2880 18%29%22%3E%3Crect x=%22-2.500%22 y=%22-7%22 width=%225%22 height=%2214%22 rx=%222.500%22 fill=%22%237fe3ff%22/%3E%3C/g%3E%3Cg transform=%22rotate%2845 80 80%29 translate%2880 18%29%22%3E%3Crect x=%22-2.500%22 y=%22-7%22 width=%225%22 height=%2214%22 rx=%222.500%22 fill=%22%23fff36e%22/%3E%3C/g%3E%3Cg transform=%22rotate%2890 80 80%29 translate%2880 18%29%22%3E%3Crect x=%22-2.500%22 y=%22-7%22 width=%225%22 height=%2214%22 rx=%222.500%22 fill=%22%239cff8a%22/%3E%3C/g%3E%3Cg transform=%22rotate%28135 80 80%29 translate%2880 18%29%22%3E%3Crect x=%22-2.500%22 y=%22-7%22 width=%225%22 height=%2214%22 rx=%222.500%22 fill=%22%23b69cff%22/%3E%3C/g%3E%3Cg transform=%22rotate%28180 80 80%29 translate%2880 18%29%22%3E%3Crect x=%22-2.500%22 y=%22-7%22 width=%225%22 height=%2214%22 rx=%222.500%22 fill=%22%237fe3ff%22/%3E%3C/g%3E%3Cg transform=%22rotate%28225 80 80%29 translate%2880 18%29%22%3E%3Crect x=%22-2.500%22 y=%22-7%22 width=%225%22 height=%2214%22 rx=%222.500%22 fill=%22%23fff36e%22/%3E%3C/g%3E%3Cg transform=%22rotate%28270 80 80%29 translate%2880 18%29%22%3E%3Crect x=%22-2.500%22 y=%22-7%22 width=%225%22 height=%2214%22 rx=%222.500%22 fill=%22%239cff8a%22/%3E%3C/g%3E%3Cg transform=%22rotate%28315 80 80%29 translate%2880 18%29%22%3E%3Crect x=%22-2.500%22 y=%22-7%22 width=%225%22 height=%2214%22 rx=%222.500%22 fill=%22%23b69cff%22/%3E%3C/g%3E%3C/svg%3E"); }
.fr-grape::before { background: conic-gradient(#b46bff,#5e2ca8,#d9b3ff,#5e2ca8,#b46bff); }
.fr-grape::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 160 160%22%3E%3Cdefs%3E%3C/defs%3E%3Cg transform=%22rotate%28150 80 80%29 translate%2880 18%29%22%3E%3Ccircle r=%227%22 fill=%22%237b3fe0%22 stroke=%22%233b1a80%22 stroke-width=%222%22/%3E%3Ccircle cx=%22-2.500%22 cy=%22-2.500%22 r=%222%22 fill=%22%23d9b3ff%22/%3E%3C/g%3E%3Cg transform=%22rotate%28180 80 80%29 translate%2880 18%29%22%3E%3Ccircle r=%227%22 fill=%22%237b3fe0%22 stroke=%22%233b1a80%22 stroke-width=%222%22/%3E%3Ccircle cx=%22-2.500%22 cy=%22-2.500%22 r=%222%22 fill=%22%23d9b3ff%22/%3E%3C/g%3E%3Cg transform=%22rotate%28210 80 80%29 translate%2880 18%29%22%3E%3Ccircle r=%227%22 fill=%22%237b3fe0%22 stroke=%22%233b1a80%22 stroke-width=%222%22/%3E%3Ccircle cx=%22-2.500%22 cy=%22-2.500%22 r=%222%22 fill=%22%23d9b3ff%22/%3E%3C/g%3E%3Cg transform=%22rotate%28180 80 80%29 translate%2880 10%29%22%3E%3Cpath d=%22M0 5 C-8 -1 -6 -11 0 -15 C6 -11 8 -1 0 5Z%22 fill=%22%2359d98b%22 stroke=%22%231f7a4a%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M0 4 V-9%22 stroke=%22%231f7a4a%22 stroke-width=%221.5%22 stroke-linecap=%22round%22/%3E%3C/g%3E%3C/svg%3E"); }
.fr-frost::before { background: conic-gradient(#e8fbff,#7fdcff,#fff,#7fdcff,#e8fbff); }
.fr-frost::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 160 160%22%3E%3Cdefs%3E%3C/defs%3E%3Cg transform=%22rotate%28-40 80 80%29 translate%2880 18%29%22%3E%3Cg stroke=%22%23e6f9ff%22 stroke-width=%222.500%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M0 -9V9M-8 -4.500L8 4.500M-8 4.500L8 -4.500%22/%3E%3C/g%3E%3Ccircle r=%222%22 fill=%22%23fff%22/%3E%3C/g%3E%3Cg transform=%22rotate%2840 80 80%29 translate%2880 18%29%22%3E%3Cg stroke=%22%23e6f9ff%22 stroke-width=%222.500%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M0 -9V9M-8 -4.500L8 4.500M-8 4.500L8 -4.500%22/%3E%3C/g%3E%3Ccircle r=%222%22 fill=%22%23fff%22/%3E%3C/g%3E%3Cg transform=%22rotate%28140 80 80%29 translate%2880 18%29%22%3E%3Cg stroke=%22%23e6f9ff%22 stroke-width=%222.500%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M0 -9V9M-8 -4.500L8 4.500M-8 4.500L8 -4.500%22/%3E%3C/g%3E%3Ccircle r=%222%22 fill=%22%23fff%22/%3E%3C/g%3E%3Cg transform=%22rotate%28220 80 80%29 translate%2880 18%29%22%3E%3Cg stroke=%22%23e6f9ff%22 stroke-width=%222.500%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M0 -9V9M-8 -4.500L8 4.500M-8 4.500L8 -4.500%22/%3E%3C/g%3E%3Ccircle r=%222%22 fill=%22%23fff%22/%3E%3C/g%3E%3C/svg%3E"); }
.fr-toxic::before { background: repeating-conic-gradient(#b6ff3d 0 14deg,#1a1d10 14deg 28deg); }
.fr-toxic::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 160 160%22%3E%3Cdefs%3E%3C/defs%3E%3Cg transform=%22rotate%28-50 80 80%29 translate%2880 18%29%22%3E%3Ccircle r=%225%22 fill=%22%23b6ff3d%22 fill-opacity=%22.85%22 stroke=%22%231a1d10%22 stroke-width=%222%22/%3E%3Ccircle cx=%22-1.500%22 cy=%22-1.500%22 r=%221.500%22 fill=%22%23fff%22/%3E%3C/g%3E%3Cg transform=%22rotate%2860 80 80%29 translate%2880 18%29%22%3E%3Ccircle r=%225%22 fill=%22%23b6ff3d%22 fill-opacity=%22.85%22 stroke=%22%231a1d10%22 stroke-width=%222%22/%3E%3Ccircle cx=%22-1.500%22 cy=%22-1.500%22 r=%221.500%22 fill=%22%23fff%22/%3E%3C/g%3E%3Cg transform=%22rotate%28160 80 80%29 translate%2880 18%29%22%3E%3Ccircle r=%225%22 fill=%22%23b6ff3d%22 fill-opacity=%22.85%22 stroke=%22%231a1d10%22 stroke-width=%222%22/%3E%3Ccircle cx=%22-1.500%22 cy=%22-1.500%22 r=%221.500%22 fill=%22%23fff%22/%3E%3C/g%3E%3Cg transform=%22rotate%28250 80 80%29 translate%2880 18%29%22%3E%3Ccircle r=%225%22 fill=%22%23b6ff3d%22 fill-opacity=%22.85%22 stroke=%22%231a1d10%22 stroke-width=%222%22/%3E%3Ccircle cx=%22-1.500%22 cy=%22-1.500%22 r=%221.500%22 fill=%22%23fff%22/%3E%3C/g%3E%3C/svg%3E"); }
.fr-sakura::before { background: conic-gradient(#ffc2d4,#ff8fb0,#fff0f5,#ff8fb0,#ffc2d4); }
.fr-sakura::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 160 160%22%3E%3Cdefs%3E%3C/defs%3E%3Cg transform=%22rotate%28-50 80 80%29 translate%2880 18%29%22%3E%3Cpath d=%22M0 5 C-7 0 -7 -9 0 -12 C7 -9 7 0 0 5Z%22 fill=%22%23ffc2d4%22 stroke=%22%23e0708f%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3C/g%3E%3Cg transform=%22rotate%28-10 80 80%29 translate%2880 18%29%22%3E%3Cpath d=%22M0 5 C-7 0 -7 -9 0 -12 C7 -9 7 0 0 5Z%22 fill=%22%23ffc2d4%22 stroke=%22%23e0708f%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3C/g%3E%3Cg transform=%22rotate%28130 80 80%29 translate%2880 18%29%22%3E%3Cpath d=%22M0 5 C-7 0 -7 -9 0 -12 C7 -9 7 0 0 5Z%22 fill=%22%23ffc2d4%22 stroke=%22%23e0708f%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3C/g%3E%3Cg transform=%22rotate%28200 80 80%29 translate%2880 18%29%22%3E%3Cpath d=%22M0 5 C-7 0 -7 -9 0 -12 C7 -9 7 0 0 5Z%22 fill=%22%23ffc2d4%22 stroke=%22%23e0708f%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3C/g%3E%3Cg transform=%22rotate%28250 80 80%29 translate%2880 18%29%22%3E%3Cpath d=%22M0 5 C-7 0 -7 -9 0 -12 C7 -9 7 0 0 5Z%22 fill=%22%23ffc2d4%22 stroke=%22%23e0708f%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3C/g%3E%3C/svg%3E"); }
.fr-hearts::before { background: conic-gradient(#ff5d7a,#ffb3c1,#ff5d7a,#c2284a,#ff5d7a); }
.fr-hearts::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 160 160%22%3E%3Cdefs%3E%3C/defs%3E%3Cg transform=%22rotate%28-24 80 80%29 translate%2880 18%29%22%3E%3Cpath d=%22M0 6 C-11 -2 -9 -11 -3.500 -10 C-1.500 -9.500 0 -8 0 -6.500 C0 -8 1.500 -9.500 3.500 -10 C9 -11 11 -2 0 6Z%22 fill=%22%23ff5d7a%22 stroke=%22%23a8243f%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3C/g%3E%3Cg transform=%22rotate%280 80 80%29 translate%2880 18%29%22%3E%3Cpath d=%22M0 6 C-11 -2 -9 -11 -3.500 -10 C-1.500 -9.500 0 -8 0 -6.500 C0 -8 1.500 -9.500 3.500 -10 C9 -11 11 -2 0 6Z%22 fill=%22%23ff5d7a%22 stroke=%22%23a8243f%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3C/g%3E%3Cg transform=%22rotate%2824 80 80%29 translate%2880 18%29%22%3E%3Cpath d=%22M0 6 C-11 -2 -9 -11 -3.500 -10 C-1.500 -9.500 0 -8 0 -6.500 C0 -8 1.500 -9.500 3.500 -10 C9 -11 11 -2 0 6Z%22 fill=%22%23ff5d7a%22 stroke=%22%23a8243f%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3C/g%3E%3C/svg%3E"); }
.fr-kitty::before { background: conic-gradient(#ffb0d0,#ff7eb6,#ffd6e8,#ff7eb6,#ffb0d0); }
.fr-kitty::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 160 160%22%3E%3Cdefs%3E%3C/defs%3E%3Cpolygon points=%2236%2C52 44%2C20 70%2C38%22 fill=%22%234a4f57%22 stroke=%22%231d2024%22 stroke-width=%223%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%2243%2C44 47%2C28 60%2C38%22 fill=%22%23ffb0d0%22/%3E%3Cpolygon points=%22124%2C52 116%2C20 90%2C38%22 fill=%22%234a4f57%22 stroke=%22%231d2024%22 stroke-width=%223%22 stroke-linejoin=%22round%22/%3E%3Cpolygon points=%22117%2C44 113%2C28 100%2C38%22 fill=%22%23ffb0d0%22/%3E%3C/svg%3E"); }
.fr-galaxy::before { background: conic-gradient(#2b1a6e,#6a3df0,#18c7ff,#ff5ec8,#2b1a6e); }
.fr-galaxy::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 160 160%22%3E%3Cdefs%3E%3C/defs%3E%3Cg transform=%22rotate%28-40 80 80%29 translate%2880 18%29%22%3E%3Cpath d=%22M0 -10 L2.500 -2.500 L10 0 L2.500 2.500 L0 10 L-2.500 2.500 L-10 0 L-2.500 -2.500Z%22 fill=%22%23fff%22 transform=%22scale%281%29%22/%3E%3C/g%3E%3Cg transform=%22rotate%2870 80 80%29 translate%2880 18%29%22%3E%3Cpath d=%22M0 -10 L2.500 -2.500 L10 0 L2.500 2.500 L0 10 L-2.500 2.500 L-10 0 L-2.500 -2.500Z%22 fill=%22%237fe3ff%22 transform=%22scale%280.8%29%22/%3E%3C/g%3E%3Cg transform=%22rotate%28160 80 80%29 translate%2880 18%29%22%3E%3Cpath d=%22M0 -10 L2.500 -2.500 L10 0 L2.500 2.500 L0 10 L-2.500 2.500 L-10 0 L-2.500 -2.500Z%22 fill=%22%23ff9be0%22 transform=%22scale%281.1%29%22/%3E%3C/g%3E%3Cg transform=%22rotate%28240 80 80%29 translate%2880 18%29%22%3E%3Cpath d=%22M0 -10 L2.500 -2.500 L10 0 L2.500 2.500 L0 10 L-2.500 2.500 L-10 0 L-2.500 -2.500Z%22 fill=%22%23fff%22 transform=%22scale%280.6%29%22/%3E%3C/g%3E%3C/svg%3E"); }
.fr-halo::before { background: conic-gradient(#ffe27a,#c48f0b,#fff2a8,#c48f0b,#ffe27a); }
.fr-halo::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 160 160%22%3E%3Cdefs%3E%3C/defs%3E%3Cellipse cx=%2280%22 cy=%2214%22 rx=%2224%22 ry=%227%22 fill=%22none%22 stroke=%22%23ffe27a%22 stroke-width=%226%22/%3E%3Cellipse cx=%2280%22 cy=%2214%22 rx=%2224%22 ry=%227%22 fill=%22none%22 stroke=%22%23fff6c8%22 stroke-width=%222%22 stroke-dasharray=%2218 60%22 stroke-dashoffset=%22-6%22/%3E%3C/svg%3E"); }
.fr-devil::before { background: conic-gradient(#ff3d3d,#7a0f1a,#ff6a3d,#7a0f1a,#ff3d3d); }
.fr-devil::after { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 160 160%22%3E%3Cdefs%3E%3C/defs%3E%3Cpath d=%22M50 40 C40 26 44 10 56 4 C54 16 60 24 68 30Z%22 fill=%22%23e5484d%22 stroke=%22%237a1620%22 stroke-width=%223%22 stroke-linejoin=%22round%22/%3E%3Cg transform=%22translate%28160 0%29 scale%28-1 1%29%22%3E%3Cpath d=%22M50 40 C40 26 44 10 56 4 C54 16 60 24 68 30Z%22 fill=%22%23e5484d%22 stroke=%22%237a1620%22 stroke-width=%223%22 stroke-linejoin=%22round%22/%3E%3C/g%3E%3C/svg%3E"); }
.fr-galaxy::before { animation: fr-spin 6s linear infinite; }
.fr-candy::before { animation: fr-spin 12s linear infinite; }
.fr-toxic::before { animation: fr-spin 7s linear infinite; }
.fr-frost::after, .fr-galaxy::after { animation: fr-twinkle 2.2s ease-in-out infinite; }
.fr-hearts::after { transform-origin: 50% 20%; animation: fr-beat 1.4s ease-in-out infinite; }
.fr-halo::after { animation: fr-float 3s ease-in-out infinite; }
@keyframes fr-twinkle { 50% { opacity: .55; } }
@keyframes fr-beat { 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .fr-galaxy::before, .fr-candy::before, .fr-toxic::before, .fr-frost::after, .fr-galaxy::after, .fr-hearts::after, .fr-halo::after { animation: none; } }

/* ---- More name colors. ---- */
.nc-coral { color: #ff8a7a !important; }
.nc-lemon { color: #ffe066 !important; }
.nc-lime { color: #a6e22e !important; }
.nc-lilac { color: #b9a3ff !important; }
.nc-peach { color: #ffb38a !important; }
.nc-aqua { color: #4fe3e0 !important; }
.nc-bubblegum,.nc-sunset,.nc-ocean,.nc-candy,.nc-toxic,.nc-frost,.nc-rosegold,.nc-midnight,.nc-lava,.nc-vapor { -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; background-size: 200% 100%; }
.nc-bubblegum { background-image: linear-gradient(90deg,#ff8ad4,#8ad4ff,#ff8ad4); }
.nc-sunset { background-image: linear-gradient(90deg,#ffb347,#ff5e8a,#ffb347); }
.nc-ocean { background-image: linear-gradient(90deg,#4d8ee7,#3de0c8,#4d8ee7); }
.nc-candy { background-image: linear-gradient(90deg,#ff7eb6,#fff,#ff7eb6); animation: nc-slide 3s linear infinite; }
.nc-toxic { background-image: linear-gradient(90deg,#b6ff3d,#3dff8f,#b6ff3d); }
.nc-frost { background-image: linear-gradient(100deg,#bfefff 30%,#fff 50%,#bfefff 70%); animation: nc-slide 2.6s linear infinite; }
.nc-rosegold { background-image: linear-gradient(90deg,#f7c1a8,#fff0e6,#e8a090,#f7c1a8); animation: nc-slide 5s linear infinite; }
.nc-midnight { background-image: linear-gradient(90deg,#7a5cff,#3ad9ff,#7a5cff); animation: nc-slide 4s linear infinite; }
.nc-lava { background-image: linear-gradient(90deg,#ff3d1f,#ffb03d,#ff3d1f); animation: nc-slide 3.2s linear infinite; }
.nc-vapor { background-image: linear-gradient(90deg,#3dffe8,#ff6ad5,#3dffe8); animation: nc-slide 3.5s linear infinite; }
.nc-toxic { filter: drop-shadow(0 0 4px #7dff3d88); }
.nc-vapor { filter: drop-shadow(0 0 4px #ff6ad555); }
@media (prefers-reduced-motion: reduce) { .nc-candy, .nc-frost, .nc-rosegold, .nc-midnight, .nc-lava, .nc-vapor { animation: none; } }

/* ---- Win popup skins (shop). The classic look is the default. ---- */
.win-popup { position: relative; }
.win-popup.wp-mini { zoom: .5; margin: 0 auto; }
.hs-prev:has(.wp-mini) { overflow: visible; }
.win-popup.wp-mint { background: #1e3a2e; box-shadow: 0 7px 0 #0b241a, 0 18px 40px #0007; }
.win-popup.wp-mint .win-popup-label { color: #8fd9b3; } .win-popup.wp-mint strong { color: #7dffc1; text-shadow: 0 3px 0 #1b6a46; }
.win-popup.wp-sunset { background: linear-gradient(120deg, #ff9a3d, #ff5e8a); box-shadow: 0 7px 0 #a8365a, 0 18px 40px #0007; }
.win-popup.wp-sunset .win-popup-label { color: #fff; opacity: .85; } .win-popup.wp-sunset strong { color: #fff; text-shadow: 0 3px 0 #b8456a; } .win-popup.wp-sunset .win-popup-amount { text-shadow: 0 3px 0 #b8456a; }
.win-popup.wp-candy { background: repeating-linear-gradient(45deg, #ff7eb6 0 14px, #ff9cc8 14px 28px); box-shadow: 0 7px 0 #b8457f, 0 18px 40px #0007; }
.win-popup.wp-candy .win-popup-label { color: #fff; } .win-popup.wp-candy strong { color: #fff; text-shadow: 0 3px 0 #c24a88; } .win-popup.wp-candy .win-popup-amount { text-shadow: 0 3px 0 #c24a88; }
.win-popup.wp-ice { background: linear-gradient(#d9f3ff, #8fd3ff); box-shadow: 0 7px 0 #4a95c4, 0 18px 40px #0007; }
.win-popup.wp-ice .win-popup-label { color: #2c6a94; } .win-popup.wp-ice strong { color: #14405e; text-shadow: 0 2px 0 #ffffff99; } .win-popup.wp-ice .win-popup-amount { color: #0f3350; text-shadow: 0 2px 0 #ffffff99; }
.win-popup.wp-neon { background: #0b0f14; box-shadow: 0 0 0 2px #3dffb0, 0 0 22px #3dffb0aa, 0 7px 0 #0a3a2a; animation: wp-neon 1.8s ease-in-out infinite; }
.win-popup.wp-neon .win-popup-label { color: #3dffb0aa; } .win-popup.wp-neon strong { color: #3dffb0; text-shadow: 0 0 12px #3dffb0; } .win-popup.wp-neon .win-popup-amount { text-shadow: 0 0 10px #ffffffaa; }
@keyframes wp-neon { 50% { box-shadow: 0 0 0 2px #3dffb0, 0 0 34px #3dffb0, 0 7px 0 #0a3a2a; } }
.win-popup.wp-gold { overflow: hidden; background: linear-gradient(120deg, #ffe27a, #ffc933 45%, #ffd95c 60%, #d99f10); box-shadow: 0 7px 0 #8a5f06, 0 18px 40px #0007; }
.win-popup.wp-gold .win-popup-label { color: #7a5206; } .win-popup.wp-gold strong { color: #5a3a02; text-shadow: 0 2px 0 #fff3a8; } .win-popup.wp-gold .win-popup-amount { color: #3a2600; text-shadow: 0 2px 0 #fff3a8; }
.win-popup.wp-gold::after { position: absolute; inset: 0; background: linear-gradient(100deg, #0000 35%, #ffffffaa 50%, #0000 65%); background-size: 250% 100%; content: ''; animation: wp-sweep 2.6s linear infinite; pointer-events: none; }
@keyframes wp-sweep { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.win-popup.wp-confetti { overflow: hidden; background-color: #2a2f34; }
.win-popup.wp-confetti::before { position: absolute; inset: 0; background-image: radial-gradient(circle, #ff5d7a 0 3px, #0000 4px), radial-gradient(circle, #ffd23a 0 3px, #0000 4px), radial-gradient(circle, #3dd88a 0 3px, #0000 4px), radial-gradient(circle, #4d8ee7 0 3px, #0000 4px), radial-gradient(circle, #b48cff 0 3px, #0000 4px); background-size: 70px 60px, 90px 80px, 60px 70px, 100px 90px, 80px 50px; background-position: 0 0, 30px 20px, 10px 40px, 50px 10px, 20px 30px; content: ''; opacity: .85; animation: wp-fall 3s linear infinite; pointer-events: none; }
@keyframes wp-fall { to { background-position: 0 60px, 30px 100px, 10px 110px, 50px 100px, 20px 80px; } }
.win-popup.wp-confetti > * { position: relative; z-index: 1; }
.win-popup.wp-glitch { background: #14151a; box-shadow: 0 7px 0 #07080a, 0 18px 40px #0007; }
.win-popup.wp-glitch .win-popup-label { color: #ff2e63; } .win-popup.wp-glitch strong { color: #fff; text-shadow: -2px 0 #ff2e63, 2px 0 #08f7fe; animation: wp-glitch 2.4s steps(1) infinite; } .win-popup.wp-glitch .win-popup-amount { color: #08f7fe; text-shadow: -1.5px 0 #ff2e63; }
@keyframes wp-glitch { 0%, 88%, 100% { text-shadow: -2px 0 #ff2e63, 2px 0 #08f7fe; transform: none; } 90% { text-shadow: 4px 0 #ff2e63, -4px 0 #08f7fe; transform: translateX(2px); } 94% { text-shadow: -4px 0 #ff2e63, 4px 0 #08f7fe; transform: translateX(-2px); } }
.win-popup.wp-royal { background: linear-gradient(120deg, #3a2a8a, #6a4ae0); box-shadow: inset 0 0 0 2px #ffd23a88, 0 7px 0 #1e1250, 0 18px 40px #0007; }
.win-popup.wp-royal .win-popup-label { color: #d9ccff; } .win-popup.wp-royal strong { color: #ffd23a; text-shadow: 0 3px 0 #8a5f06; } .win-popup.wp-royal .win-popup-amount { text-shadow: 0 3px 0 #1e1250; }
.win-popup.wp-royal::before { position: absolute; left: 50%; top: -22px; width: 54px; height: 30px; transform: translateX(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 30'%3E%3Cpath d='M4 26 L8 6 L19 17 L27 2 L35 17 L46 6 L50 26 Z' fill='%23ffd23a' stroke='%238a5f06' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; content: ''; }
.win-popup.wp-inferno { background: linear-gradient(0deg, #ff3d1f, #ff8a1f 60%, #ffd24a); box-shadow: 0 7px 0 #8f1d0a, 0 0 30px #ff5a1f88, 0 18px 40px #0007; animation: wp-flame 1s ease-in-out infinite alternate; }
.win-popup.wp-inferno .win-popup-label { color: #fff; opacity: .9; } .win-popup.wp-inferno strong { color: #fff; text-shadow: 0 3px 0 #b02a0a; } .win-popup.wp-inferno .win-popup-amount { text-shadow: 0 3px 0 #b02a0a; }
@keyframes wp-flame { to { box-shadow: 0 7px 0 #8f1d0a, 0 0 44px #ff8a1fcc, 0 18px 40px #0007; } }
@media (prefers-reduced-motion: reduce) { .win-popup.wp-neon, .win-popup.wp-inferno, .win-popup.wp-gold::after, .win-popup.wp-confetti::before, .win-popup.wp-glitch strong { animation: none; } }
.win-popup.wp-mini strong { font-size: 30px; } .win-popup.wp-mini .win-popup-amount { font-size: 22px; }
.win-popup.wp-confetti::before { background-size: 44px 38px, 56px 50px, 38px 44px, 62px 56px, 50px 32px; opacity: .6; }
@keyframes wp-fall { to { background-position: 0 38px, 30px 70px, 10px 70px, 50px 66px, 20px 50px; } }

.hs-card.hs-anim { animation: hs-in .4s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(var(--i) * 40ms); }

.hs-more { grid-column: 1 / -1; display: grid; place-items: center; padding-top: 6px; }
.hs-morebtn { display: inline-flex; align-items: center; gap: 10px; padding: 11px 26px; border: 0; border-radius: 14px; background: #2a2f34; box-shadow: 0 4px 0 #0007; color: #fff; font: 400 16px "Lilita One", sans-serif; letter-spacing: .02em; cursor: pointer; transition: background .2s ease, transform .25s cubic-bezier(.3, 1.6, .5, 1), box-shadow .15s ease; }
.hs-morebtn:hover { background: #363c42; transform: translateY(-2px); }
.hs-morebtn:active { transform: translateY(3px); box-shadow: 0 1px 0 #0007; }
.hs-chev { width: 10px; height: 10px; margin-top: -4px; border: solid #4d8ee7; border-width: 0 3px 3px 0; border-radius: 1px; transform: rotate(45deg); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), margin .3s ease; }
.hs-chev.up { margin-top: 4px; transform: rotate(-135deg); }

/* ---- Chicken Cross skins: colour filter on the chicken svg + an accessory layer that tracks the eyes. ---- */
.cs-golden .cross-animated-art > svg { filter: sepia(1) saturate(5.5) hue-rotate(-24deg) brightness(.98) contrast(1.05); }
.cs-bubblegum .cross-animated-art > svg { filter: sepia(1) saturate(3) hue-rotate(290deg) brightness(1.12); }
.cs-sky .cross-animated-art > svg { filter: sepia(1) saturate(3.4) hue-rotate(160deg) brightness(1.15); }
.cs-slime .cross-animated-art > svg { filter: sepia(1) saturate(3.4) hue-rotate(55deg) brightness(1.05); }
.cs-cocoa .cross-animated-art > svg { filter: sepia(1) saturate(3) hue-rotate(-12deg) brightness(.55) contrast(1.1); }
.cs-shadow .cross-animated-art > svg { filter: brightness(.3) contrast(1.3) drop-shadow(0 0 6px #7a5cff); }
.cs-ghost .cross-animated-art > svg { filter: opacity(.75) brightness(1.15) drop-shadow(0 0 8px #bfe8ff); }
.cs-robot .cross-animated-art > svg { filter: grayscale(.85) hue-rotate(185deg) saturate(2) brightness(1.05) contrast(1.1); }
.cs-ninja .cross-animated-art > svg { filter: brightness(.42) contrast(1.15); }
.cs-rainbow .cross-animated-art > svg { animation: cs-hue 4s linear infinite; }
@keyframes cs-hue { from { filter: sepia(1) saturate(3.5) hue-rotate(0deg); } to { filter: sepia(1) saturate(3.5) hue-rotate(360deg); } }
.cross-acc { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cross-art-static { position: relative; }
@media (prefers-reduced-motion: reduce) { .cs-rainbow .cross-animated-art > svg { animation: none; } }
.hs-acc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* shop preview */
.hs-chick { position: relative; width: 74px; height: 74px; }
.hs-chick-in { position: absolute; left: -8px; top: -34px; width: 136px; height: 300px; transform: scale(.62); transform-origin: 0 0; pointer-events: none; }
.hs-chick-in > svg { display: block; width: 100%; height: 100%; }
.hs-chick-in .cross-animated-art { position: absolute; inset: 0; }
.hs-chick { width: 80px; height: 80px; }
.hs-chick-in { left: -26px; top: -62px; transform: scale(.88); }

/* ---- Shop: smooth View more / Show less. ---- */
.hs-collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s cubic-bezier(.3, 1, .4, 1); }
.hs-collapse.open { grid-template-rows: 1fr; }
.hs-collapse-in { min-height: 0; margin: 0 -8px; padding: 0 8px; overflow: hidden; }
.hs-collapse-in > .hs-grid { padding: 14px 0 18px; }
.hs-collapse .hs-card { opacity: 0; transform: translateY(20px) scale(.94); animation: none; transition: opacity .35s ease, transform .6s cubic-bezier(.3, 1.4, .5, 1), background .25s ease, box-shadow .25s ease; transition-delay: calc(var(--j, 0) * 45ms); }
.hs-collapse.open .hs-card { opacity: 1; transform: none; }
.hs-collapse:not(.open) .hs-card { transition-delay: 0ms; transition-duration: .2s; }
.hs-collapse.open .hs-card:hover { transform: translateY(-6px) scale(1.025); transition-delay: 0ms; }
.hs-more { padding-top: 14px; }
.hs-morebtn .hs-label { display: inline-block; min-width: 92px; text-align: center; }

/* ---- Boosters tab ---- */
.hs-boost { display: grid; justify-items: center; align-content: center; width: 86px; height: 86px; border-radius: 24px; background: linear-gradient(145deg, var(--b1, #6aa8ff), var(--b2, #2f6fd0)); box-shadow: 0 5px 0 var(--b3, #1d4a96), inset 0 0 0 3px #ffffff30, 0 0 22px var(--bg, #4d8ee755); color: #fff; transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.hs-boost span { font: 400 36px/1 "Lilita One", sans-serif; text-shadow: 0 3px 0 #0003; }
.hs-boost small { margin-top: 2px; font: 800 10px var(--body); letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.bx-2 { --b1: #7ab4ff; --b2: #3a78d8; --b3: #1d4a96; --bg: #4d8ee766; }
.bx-3 { --b1: #5be39c; --b2: #25a860; --b3: #14693b; --bg: #3dd88a66; }
.bx-5 { --b1: #b79cff; --b2: #7a4fe0; --b3: #43229b; --bg: #9a7cf077; }
.bx-10 { --b1: #ffd24a; --b2: #ff7a1f; --b3: #a83a06; --bg: #ff8a1faa; animation: bx-fire 1.1s ease-in-out infinite alternate; }
@keyframes bx-fire { to { box-shadow: 0 5px 0 #a83a06, inset 0 0 0 3px #ffffff40, 0 0 34px #ffb03dcc; } }
.hs-card:hover .hs-boost { transform: scale(1.1) rotate(-4deg); }
.hs-boost-note { margin: 0 0 14px; padding: 14px 18px; border-radius: 16px; background: #22262a; box-shadow: 0 4px 0 #0007; color: #c3c9cd; font-size: 13px; line-height: 1.5; }
.hs-boost-banner { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; padding: 14px 20px; border-radius: 18px; background: linear-gradient(120deg, var(--b2, #3a78d8), var(--b3, #1d4a96)); box-shadow: 0 5px 0 #0008, 0 0 24px var(--bg, #4d8ee755); color: #fff; }
.hs-boost-banner .hs-boost-x { font: 400 40px/1 "Lilita One", sans-serif; text-shadow: 0 3px 0 #0004; }
.hs-boost-banner strong { display: block; font: 400 19px/1.1 "Lilita One", sans-serif; }
.hs-boost-banner small { display: block; margin-top: 3px; font: 600 13px var(--body); opacity: .92; }
.hs-boost-banner small b { font-weight: 800; }
.rb-booster { margin: 8px auto 0; width: max-content; max-width: 100%; padding: 6px 14px; border-radius: 12px; background: #ff7a1f; box-shadow: 0 3px 0 #a83a06; color: #fff; font: 400 14px "Lilita One", sans-serif; }
.rb-booster[hidden] { display: none; }

/* ---- Chat bubbles: chunky, cartoony, with a bottom edge and a pop-in. ---- */
.chat-msgs { gap: 12px; padding: 16px 16px 18px; }
.chat-msg { position: relative; max-width: 80%; padding: 10px 15px 9px; border-radius: 18px 18px 18px 6px; background: linear-gradient(160deg, #3a4148, #2e343a); box-shadow: 0 4px 0 #181b1f, inset 0 1px 0 #ffffff12; color: #eef1f3; font: 600 14px/1.45 var(--body); transform-origin: 0 100%; animation: chat-pop .38s cubic-bezier(.3, 1.6, .5, 1) both; }
.chat-msg.user { border-radius: 18px 18px 6px 18px; background: linear-gradient(160deg, #62a2f5, #3f7ee0); box-shadow: 0 4px 0 #2a5c9f, inset 0 1px 0 #ffffff33; color: #fff; transform-origin: 100% 100%; text-shadow: 0 1px 0 #0000002e; }
.chat-msg time { display: block; margin-top: 4px; opacity: .6; font: 700 10px var(--body); letter-spacing: .04em; }
.chat-msg.user time { text-align: right; }
.chat-msg.staff, .chat-msg.support, .chat-msg.admin { background: linear-gradient(160deg, #3d6f52, #2f5a43); box-shadow: 0 4px 0 #1b3a2a, inset 0 1px 0 #ffffff1a; }
@keyframes chat-pop { from { opacity: 0; transform: translateY(8px) scale(.9); } }
@media (prefers-reduced-motion: reduce) { .chat-msg { animation: none; } }

/* Boosters: flat cartoon potions instead of glowing tiles. */
.hs-potion { display: grid; place-items: center; }
.hs-potion svg { width: 86px; height: 96px; overflow: visible; transform-origin: 50% 90%; transition: transform .5s cubic-bezier(.3, 1.7, .5, 1); }
.hs-card:hover .hs-potion svg { transform: rotate(-7deg) scale(1.08) translateY(-3px); }
.hs-sub { margin-top: -6px; color: #8f979e; font: 700 11px var(--body); letter-spacing: .03em; }
.hs-boost-banner { box-shadow: 0 5px 0 #0008; }
.hs-boost-note { box-shadow: 0 4px 0 #0007; }

#wallet-converted { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.wallet-big-coin { width: 30px; height: 30px; flex: none; filter: hue-rotate(175deg) saturate(1.15); }

/* ---- Chat bubbles, flat (no gradients). Skins below override colours only. ---- */
.chat-msg { background: #343a41; box-shadow: 0 4px 0 #181b1f; }
.chat-msg.user { background: #4d8ee7; box-shadow: 0 4px 0 #2a5c9f; text-shadow: none; }
.chat-msg.staff, .chat-msg.support, .chat-msg.admin { background: #3a7a56; box-shadow: 0 4px 0 #1f4a33; }
.hs-bubble { max-width: 100%; margin: 6px 0; animation: none; white-space: nowrap; }
.chat-msg.bb-mint { background: #3dd88a; color: #0d2a1a; box-shadow: 0 4px 0 #1b7a4b; }
.chat-msg.bb-grape { background: #8a63e8; color: #fff; box-shadow: 0 4px 0 #4b2fa3; }
.chat-msg.bb-coral { background: #ff7a6b; color: #fff; box-shadow: 0 4px 0 #b8402f; }
.chat-msg.bb-sky { background: #bfe2ff; color: #14405e; box-shadow: 0 4px 0 #7eb4e0; }
.chat-msg.bb-lemon { background: #ffe27a; color: #4a3500; box-shadow: 0 4px 0 #c9a400; }
.chat-msg.bb-paper { background: #f4f6f9; color: #1c2024; box-shadow: 0 4px 0 #b9c1cb; }
.chat-msg.bb-midnight { background: #1b2438; color: #cfe0ff; box-shadow: 0 4px 0 #0b1220, inset 0 0 0 1px #34466b; }
.chat-msg.bb-rose { background: #ff7eb6; color: #fff; box-shadow: 0 4px 0 #b8457f; }
.chat-msg.bb-candy { background: repeating-linear-gradient(45deg, #ff8fc1 0 10px, #ff9fcb 10px 20px); color: #fff; box-shadow: 0 4px 0 #b8457f; }
.chat-msg.bb-terminal { background: #0b0f0c; color: #5dff8f; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-weight: 600; box-shadow: 0 4px 0 #05140a, inset 0 0 0 1px #1f6b3a; }
.chat-msg.bb-neon { background: #0c0f14; color: #fff; box-shadow: 0 4px 0 #0a3a2a, inset 0 0 0 2px #3dffb0; }
.chat-msg.bb-gold { background: #ffd23a; color: #4a3500; box-shadow: 0 4px 0 #a87b05; }
.chat-msg.bb-comic { background: #fff; color: #14171a; font-weight: 800; box-shadow: 4px 4px 0 #14171a, inset 0 0 0 3px #14171a; }
.chat-msg.bb-royal { background: #4a2fa3; color: #ffe27a; box-shadow: 0 4px 0 #1e1250, inset 0 0 0 2px #ffd23a; }

/* ---- Header balance box: always visible, same size in every mode. ---- */
.wallet-center-wrap { background: #1a1d21 !important; box-shadow: inset 0 2px 0 #0000004d, 0 0 0 1px #2b3037 !important; }
.top-wallet { min-width: 104px; justify-content: center; }

/* ---- Logo text: clean edges (the hairline stroke made small sizes look jagged). ---- */
.brand-name strong, .brand-name span { -webkit-text-stroke: 0 !important; text-rendering: geometricPrecision; -webkit-font-smoothing: antialiased; }
.brand-name strong { filter: drop-shadow(0 1px 0 #07111d) drop-shadow(0 2px 0 #0f1113); }
.brand-name span { filter: drop-shadow(0 1px 0 #3a4a5c) drop-shadow(0 2px 0 #0f1113); }
#site-loader .brand-name strong, #site-loader .brand-name span { -webkit-text-stroke: .55px #07111d !important; }

/* ---- Rank panels: flat dark cards with a rank-coloured accent, same family as the shop. ---- */
.rank-panels .rank-panel { background: #22262a !important; box-shadow: 0 5px 0 #0007 !important; border-radius: 20px; padding: 20px 24px; }
.rank-panels .rank-panel::before { display: none !important; }
.rank-panels .rank-badge { filter: none !important; }
.rank-panels .rank-title span { color: #8f979e !important; }
.rank-panels .rank-title strong { color: var(--rk) !important; font-size: 32px; text-shadow: 0 3px 0 #0005; }
.rank-panels .rank-next { color: #a3abb2 !important; }
.rank-panels .rank-perk { background: #2f353b !important; color: var(--rk) !important; box-shadow: 0 3px 0 #0006; }
.rank-panels .rank-value b { color: #fff; font: 400 26px/1 "Lilita One", sans-serif; text-shadow: 0 3px 0 #0005; }
.rank-panels .rank-value small { color: #8f979e !important; }
.rank-panels .rank-bar { height: 14px; margin: 14px 0 12px; border-radius: 99px; background: #15181b; box-shadow: inset 0 2px 0 #0006; }
.rank-panels .rank-bar i { background: var(--rk) !important; box-shadow: inset 0 -3px 0 #0003 !important; border-radius: 99px; }
.rank-panels .rank-ladder { gap: 8px; }
.rank-panels .rank-ladder li { justify-content: center; padding: 9px 8px; border-radius: 12px; background: #2a2f34; color: #8f979e !important; box-shadow: 0 3px 0 #0006; font-size: 12.5px; }
.rank-panels .rank-ladder li b { font-weight: 800; }
.rank-panels .rank-ladder li.reached { background: var(--c) !important; color: #15181b !important; box-shadow: 0 3px 0 #00000055; }
.rank-panels .rank-ladder li.reached small { opacity: .75; }

/* ---- More chat bubbles. Flat colours, real details (borders, patterns, tape, hearts), no gradient washes. ---- */
.chat-msg.bb-matcha { background: #cfe8b8; color: #25401a; box-shadow: 0 4px 0 #8fb872; }
.chat-msg.bb-cocoa { background: #6b4630; color: #f4e3d0; box-shadow: 0 4px 0 #3a2314; }
.chat-msg.bb-ocean { background: #1f5fa8; color: #e8f4ff; box-shadow: 0 4px 0 #123a6b; }
.chat-msg.bb-sunset { background: #ff8a3d; color: #fff; box-shadow: 0 4px 0 #e0457b; }
.chat-msg.bb-stealth { background: #1d2024; color: #c9ced4; box-shadow: 0 4px 0 #0b0c0e; }
.chat-msg.bb-polka { background-color: #ff6fa5; background-image: radial-gradient(#ffffff40 22%, #0000 24%); background-size: 14px 14px; color: #fff; box-shadow: 0 4px 0 #b8457f; }
.chat-msg.bb-notebook { background-color: #fdfdf8; background-image: repeating-linear-gradient(#0000 0 19px, #cfe0f5 19px 20px); color: #20304a; box-shadow: 0 4px 0 #b9c1cb, inset 3px 0 0 #ff7a7a; }
.chat-msg.bb-tape { background: #d9b98a; color: #3b2a14; box-shadow: 0 4px 0 #9a7a4b; }
.chat-msg.bb-tape::before, .chat-msg.bb-tape::after { position: absolute; top: -6px; width: 34px; height: 12px; background: #f6edb0cc; content: ''; }
.chat-msg.bb-tape::before { left: 10px; transform: rotate(-6deg); } .chat-msg.bb-tape::after { right: 10px; transform: rotate(5deg); }
.chat-msg.bb-ice { background: #d6f2ff; color: #0e3a55; box-shadow: 0 4px 0 #7cc7ee, inset 0 0 0 2px #ffffffcc; }
.chat-msg.bb-camo { background-color: #5b6b3a; background-image: radial-gradient(circle at 20% 30%, #3f4d27 0 16px, #0000 17px), radial-gradient(circle at 72% 62%, #7b8a52 0 14px, #0000 15px), radial-gradient(circle at 48% 88%, #2d3a1b 0 12px, #0000 13px); color: #f0f3e0; box-shadow: 0 4px 0 #2d3a1b; text-shadow: 0 1px 0 #0006; }
.chat-msg.bb-stickynote { background: #ffe66d; color: #4a3a00; box-shadow: 0 4px 0 #c9a900; transform: rotate(-1.2deg); }
.chat-msg.bb-stickynote::after { position: absolute; right: 0; bottom: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 14px 14px; border-color: #0000 #0000 #e0c02e #0000; content: ''; }
.chat-msg.bb-mono { background: #fff; color: #000; font-weight: 800; box-shadow: 4px 4px 0 #000, inset 0 0 0 2px #000; }
.chat-msg.bb-pixel { border-radius: 0 !important; background: #101826; color: #7fe3ff; font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; box-shadow: 4px 0 0 #7fe3ff, -4px 0 0 #7fe3ff, 0 4px 0 #7fe3ff, 0 -4px 0 #7fe3ff, 0 8px 0 #0a1020; }
.chat-msg.bb-checker { background: repeating-conic-gradient(#14171a 0 25%, #f4f4f4 0 50%) 0 0 / 16px 16px; color: #fff; font-weight: 800; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 0 #000; box-shadow: 0 4px 0 #000; }
.chat-msg.bb-hazard { padding-bottom: 17px; background: #ffd23a; color: #14171a; font-weight: 800; box-shadow: 0 4px 0 #8a6a00; overflow: hidden; }
.chat-msg.bb-hazard::after { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; background: repeating-linear-gradient(45deg, #14171a 0 8px, #ffd23a 8px 16px); content: ''; }
.chat-msg.bb-hazard time { opacity: .75; }
.chat-msg.bb-chalk { background: #2f4a3c; color: #f3f6ef; font-style: italic; outline: 2px dashed #f3f6ef88; outline-offset: -6px; box-shadow: 0 4px 0 #1b2e24; }
.chat-msg.bb-heart { background: #ff5d8f; color: #fff; box-shadow: 0 4px 0 #b8325f; }
.chat-msg.bb-heart::before { position: absolute; left: -7px; top: -9px; content: '\2665'; color: #fff; font-size: 17px; line-height: 1; text-shadow: 0 2px 0 #b8325f; }
.chat-msg.bb-retro { background: #f6ead2; color: #3a2a1a; font-family: Georgia, "Times New Roman", serif; font-weight: 700; box-shadow: 4px 4px 0 #d95c3c, inset 0 0 0 2px #3a2a1a; }
.chat-msg.bb-galaxy { background-color: #1a1233; background-image: radial-gradient(#fff 1px, #0000 1.6px), radial-gradient(#b9a3ff 1px, #0000 1.6px); background-size: 24px 24px, 24px 24px; background-position: 0 0, 12px 12px; color: #e8e0ff; box-shadow: 0 4px 0 #0b0820, inset 0 0 0 2px #4a3a8a; }
.chat-msg.bb-lava { background: #3a0f0f; color: #ffd8a8; box-shadow: 0 4px 0 #1a0505, inset 0 0 0 2px #ff6a1f; }
.chat-msg.bb-cyber { background: #0d0f1a; color: #fff; box-shadow: -3px 0 0 #ff2e97, 3px 0 0 #00e5ff, 0 4px 0 #05060c; }
.chat-msg.bb-sticker { background: #fff; color: #14171a; font-weight: 800; box-shadow: 0 0 0 2px #14171a, 3px 5px 0 2px #0009; transform: rotate(1deg); }
.chat-msg.bb-arcade { background: #0a0a14; color: #ffe14a; font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; box-shadow: 0 4px 0 #000, inset 0 0 0 2px #ff2e97, inset 0 0 0 5px #0a0a14, inset 0 0 0 7px #00e5ff; }
.chat-msg.bb-diamond { background-color: #bff3ff; background-image: linear-gradient(135deg, #ffffff77 0 18%, #0000 18% 40%, #ffffff55 40% 48%, #0000 48%); color: #0a4a5a; box-shadow: 0 4px 0 #5cc8e6, inset 0 0 0 2px #ffffffcc; }
.chat-msg.bb-platinum { background: #e6eaee; color: #2a3138; box-shadow: 0 4px 0 #7e8892, inset 0 0 0 3px #fff, inset 0 0 0 5px #aeb6bf; }
.chat-msg.bb-obsidian { background: #14101c; color: #e9ddff; box-shadow: 0 4px 0 #07050c, inset 0 0 0 2px #7a4bff; }
.chat-msg.bb-ember { background-color: #1c1210; background-image: radial-gradient(#ff7a1f 1.4px, #0000 2px), radial-gradient(#ffb03d 1px, #0000 1.6px); background-size: 30px 30px, 22px 22px; background-position: 4px 14px, 13px 3px; color: #ffd9b3; box-shadow: 0 4px 0 #0a0605, inset 0 0 0 2px #ff7a1f; }
.chat-msg.bb-legend { background: #ffd23a; color: #3a2a00; font-weight: 800; box-shadow: 0 4px 0 #8a5f06, inset 0 0 0 3px #fff2a8, inset 0 0 0 5px #c48f0b; }
.chat-msg.bb-legend::after { position: absolute; right: 12px; top: -13px; width: 24px; height: 17px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath d='M2 14 L3 3 L8 8 L11 1 L14 8 L19 3 L20 14Z' fill='%23fff2a8' stroke='%238a5f06' stroke-width='1.600' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; content: ''; }
.hs-bubble.bb-pixel, .hs-bubble.bb-sticker, .hs-bubble.bb-mono { margin: 8px 4px; }
.chat-msg.bb-checker { padding-bottom: 17px; background: #14171a; color: #fff; font-weight: 800; text-shadow: none; box-shadow: 0 4px 0 #000; overflow: hidden; }
.chat-msg.bb-checker::after { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: repeating-conic-gradient(#fff 0 25%, #14171a 0 50%) 0 0 / 8px 8px; content: ''; }
.chat-msg.bb-heart::before { left: -4px; top: -7px; }

/* Popup windows stay locked to the middle of the screen while the page scrolls behind them */
.auth-dialog, .username-dialog, .delivery-dialog { position: fixed; inset: 0; margin: auto; max-height: calc(100dvh - 24px); overflow-y: auto; }

/* Photos in chats */
.chat-photo { display: block; max-width: 100%; max-height: 220px; margin-bottom: 4px; border-radius: 10px; background: #15181b; cursor: zoom-in; object-fit: contain; }
.chat-msg .chat-photo { max-width: 240px; }
.chat-attach-wrap { display: inline-flex; flex: none; align-self: flex-end; }
.chat-attach { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 12px; background: #2c333b; box-shadow: 0 3px 0 #0b0d0f; color: #c9d1d8; cursor: pointer; transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.chat-attach:hover:not(:disabled) { background: #343c45; color: #fff; transform: translateY(-1px); box-shadow: 0 4px 0 #0b0d0f; }
.chat-attach:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #0b0d0f; }
.chat-attach.busy { opacity: .5; cursor: progress; }
.chat-attach svg { width: 20px; height: 20px; }
.chat-form { align-items: flex-end; }
.photo-view { max-width: 94vw; max-height: 94vh; padding: 0; border: 0; background: transparent; overflow: visible; }
.photo-view::backdrop { background: #000c; backdrop-filter: blur(4px); }
.photo-view-img { display: block; max-width: 94vw; max-height: 90vh; border-radius: 12px; }
.photo-view-close { position: absolute; top: -14px; right: -14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #2c333b; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }

/* Purchases: Report / Rate buttons match "View login" (same height, radius and font). */
.order-row .order-report, .order-row .order-rate { height: 36px; padding: 0 14px; margin-left: 0; border-radius: 9px; font: 700 13px var(--body); white-space: nowrap; }
.order-row .order-report { border: 1px solid #5a3a3f; background: rgba(224, 82, 99, .10); color: #ff8d99; }
.order-row .order-report:hover { border-color: #a24b57; background: rgba(224, 82, 99, .20); color: #ffb0b9; transform: translateY(-1px); }
.order-row .order-rate { border: 0; background: #f2c14e; color: #2b2208; box-shadow: inset 0 -3px 0 #c79a2c; }
.order-row .order-rate:hover:not(:disabled) { background: #f7cd68; border: 0; transform: translateY(-1px); }
.order-row .order-rate:disabled { background: #2c333b; color: #8a949c; box-shadow: none; cursor: not-allowed; }
.order-row .order-rated { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: 9px; background: rgba(242, 193, 78, .12); color: #f2c14e; font: 700 13px var(--body); }
.order-row:has(.order-report) { flex-wrap: wrap; row-gap: 10px; }

/* Purchases buttons: raised, with a shadow under them like the rest of the site. */
.order-row .order-open { box-shadow: 0 3px 0 #2a5c9f; }
.order-row .order-report, .order-row .order-rate { border: 0; transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.order-row .order-report { background: #2c333b; color: #ff9aa5; box-shadow: inset 0 1px 0 #3b434c, 0 3px 0 #0b0d0f; }
.order-row .order-report:hover { border: 0; background: #343c45; color: #ffb6bf; transform: translateY(-1px); box-shadow: inset 0 1px 0 #444d57, 0 4px 0 #0b0d0f; }
.order-row .order-rate { background: #f2c14e; color: #2b2208; box-shadow: inset 0 1px 0 #f9dc8f, 0 3px 0 #8a6a14; }
.order-row .order-rate:hover:not(:disabled) { background: #f7cd68; transform: translateY(-1px); box-shadow: inset 0 1px 0 #fbe5a5, 0 4px 0 #8a6a14; }
.order-row .order-rate:disabled { background: #2c333b; color: #7f8991; box-shadow: inset 0 1px 0 #3b434c, 0 3px 0 #0b0d0f; cursor: not-allowed; }
.order-row .order-open:active { transform: translateY(2px); box-shadow: 0 1px 0 #2a5c9f; }
.order-row .order-report:active, .order-row .order-rate:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #0b0d0f; }
.order-row:has(.order-report) { row-gap: 14px; }
.dm-top img { width: 19px; height: 19px; filter: invert(1); opacity: .8; }

/* Chat drawers: the content can never be wider than the drawer (a long listing title used to stretch it off the screen). */
.chat-drawer { grid-template-columns: minmax(0, 1fr); overflow: hidden; max-width: 100vw; }
.chat-drawer > * { min-width: 0; }
.dm-drawer { grid-template-rows: auto minmax(0, 1fr) auto; }
.chat-drawer .chat-msgs { min-width: 0; overflow-x: hidden; }
.dm-thread { min-width: 0; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
.dm-top img { width: 19px; height: 19px; }

/* Notifications: no see-through blue and no dot. Unread ones are raised solid cards, read ones sit flat and dim. */
.notification-list { padding: 8px 8px 20px; }
.notification-item { margin-bottom: 8px; padding: 12px; border-radius: 12px; background: #23282d; box-shadow: none; }
.notification-item:hover { background: #2a3037; transform: none; }
.notification-item strong { color: #aeb6bd; }
.notification-item span { color: #7f8991; }
.notification-item small { color: #626b73; }
.notification-item .notification-icon { background: #1a1d20; }
.notification-item.unread { background: #353c44; box-shadow: inset 0 1px 0 #444c55, 0 3px 0 #0b0d0f; }
.notification-item.unread:hover { background: #3c444d; }
.notification-item.unread strong { color: #fff; }
.notification-item.unread span { color: #c9d1d8; }
.notification-item.unread small { color: #8a949c; }
.notification-item.unread .notification-icon { background: #1a1d20; }
.notification-item.unread::before { display: none; }

/* "View marketplace": a proper raised button, lined up with the right edge of the account cards. */
.home-heading { justify-content: space-between; margin-bottom: 2px; }
.home-more { display: inline-flex; align-items: center; gap: 8px; height: 38px; margin-left: auto; padding: 0 16px; border-radius: 11px; background: #4d8ee7; box-shadow: inset 0 -3px 0 #2a5c9f, 0 3px 0 #1a3a66; color: #fff; font: 700 13.5px var(--body); transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.home-more svg { width: 15px; height: 15px; transition: transform .15s ease; }
.home-more:hover { background: #5b9bf0; color: #fff; transform: translateY(-1px); }
.home-more:hover svg { transform: translateX(3px); }
.home-more:active { transform: translateY(2px); box-shadow: inset 0 -2px 0 #2a5c9f, 0 1px 0 #1a3a66; }
.home-more { box-shadow: 0 4px 0 #2a5c9f; border: 0; }
.home-more:hover { box-shadow: 0 5px 0 #2a5c9f; }
.home-more:active { box-shadow: 0 1px 0 #2a5c9f; }

/* Sign in / Create account: real raised buttons instead of plain text. */
.email-auth-form { margin-bottom: 14px; }
.email-auth-form button[type="submit"], .username-dialog .username-submit { height: 48px; border: 0; border-radius: 12px; background: #4d8ee7; box-shadow: 0 4px 0 #2a5c9f; color: #fff; font: 700 15px var(--body); letter-spacing: .01em; transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.email-auth-form button[type="submit"]:hover:not(:disabled), .username-dialog .username-submit:hover:not(:disabled) { background: #5b9bf0; transform: translateY(-1px); box-shadow: 0 5px 0 #2a5c9f; }
.email-auth-form button[type="submit"]:active:not(:disabled), .username-dialog .username-submit:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #2a5c9f; }
.email-auth-form #email-auth-mode { height: 46px; margin-top: 14px; border: 0; border-radius: 12px; background: #2c333b; box-shadow: 0 4px 0 #0b0d0f, inset 0 1px 0 #3b434c; color: #fff; font: 700 14px var(--body); transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.email-auth-form #email-auth-mode:hover { background: #343c45; color: #fff; transform: translateY(-1px); box-shadow: 0 5px 0 #0b0d0f, inset 0 1px 0 #444d57; }
.email-auth-form #email-auth-mode:active { transform: translateY(3px); box-shadow: 0 1px 0 #0b0d0f; }
.email-auth-form button:focus-visible, .username-dialog .username-submit:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Shop: an already-expanded section redraws open at once (no height tween) and its cards fade in with the same stagger as the first rows. */
.hs-collapse.instant { transition: none; }
.hs-collapse.instant .hs-card { transition-delay: 0ms; }
.hs-collapse.instant .hs-card.hs-anim { animation: hs-in .4s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(var(--i) * 40ms); }

/* Shop balance: unit switch (GBucks / credits / USD) beside the balance pill. */
.hs-balwrap { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.hs-balwrap .hs-bal { margin-left: 0; }
.hs-swap { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px 0 10px; border: 0; border-radius: 99px; background: #30363d; box-shadow: inset 0 -3px 0 #23282d; color: #fff; font: 700 12px var(--body); cursor: pointer; transition: background-color .15s ease, transform .15s ease; }
.hs-swap:hover { background: #3d454e; }
.hs-swap:active { transform: translateY(1px); }
.hs-swap:focus-visible { outline: 2px solid #7eb1f3; outline-offset: 2px; }
.hs-swap svg { width: 16px; height: 16px; flex: none; }

.hs-swap.game { background: #4d8ee7; box-shadow: inset 0 -3px 0 #2f6fd4; color: #fff; }
.hs-swap.game:hover { background: #5b9aef; }
.hs-swap.credits { background: #f2c14e; box-shadow: inset 0 -3px 0 #a8801a; color: #1a1405; }
.hs-swap.credits:hover { background: #f7cd68; }

/* Shop hover motion: slower, gentler ease-out (no springy overshoot) so every card, preview, button and tab glides. */
.hs-card { transition: transform .5s cubic-bezier(.22, 1, .36, 1), background-color .4s ease, box-shadow .5s cubic-bezier(.22, 1, .36, 1); }
.hs-prev > *, .hs-nc, .hs-boost, .hs-potion svg { transition: transform .55s cubic-bezier(.22, 1, .36, 1); }
.hs-card strong { transition: color .4s ease, letter-spacing .5s cubic-bezier(.22, 1, .36, 1); }
.hs-btn { transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease, background-color .35s ease; }
.hs-tab, .pe-frame, .pe-badge, .hs-morebtn, .hs-swap { transition: background-color .35s ease, color .35s ease, transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease; }
.hs-collapse .hs-card { transition: opacity .45s ease, transform .6s cubic-bezier(.22, 1, .36, 1), background-color .4s ease, box-shadow .5s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--j, 0) * 45ms); }
.hs-collapse:not(.open) .hs-card { transition-delay: 0ms; transition-duration: .25s; }
.hs-collapse.open .hs-card:hover { transition-delay: 0ms; }
.hs-card:hover .hs-prev > *, .hs-card:hover .hs-nc { transition-duration: .55s; }
@media (prefers-reduced-motion: reduce) { .hs-card, .hs-prev > *, .hs-btn, .hs-tab, .pe-frame, .hs-collapse .hs-card { transition: none; } }

/* Seller price under the $2.00 minimum: clean red state. */
.sl-money.low input { border-color: #e04852; background: #1f1416; }
.sl-money.low b { color: #ff8088; }
.sl-fee.low { display: block; padding: 8px 12px; border-radius: 10px; background: #2a1518; box-shadow: inset 0 0 0 1px #e0485255; color: #ff8d95; font-weight: 700; text-align: left; }

/* Account hold banner: a dark card with a red edge, in line with the rest of the site. */
#hold-banner { display: flex; flex-wrap: nowrap; align-items: center; gap: 14px; padding: 14px 16px; border: 0; border-radius: 14px; background: #22262a; box-shadow: 0 4px 0 #0007; color: #c3c9cd; }
#hold-banner .hb-icon { display: grid; flex: none; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: #3a2226; color: #ff8a92; font: 400 20px/1 "Lilita One", sans-serif; }
#hold-banner .hb-copy { display: grid; flex: 1; gap: 3px; min-width: 0; }
#hold-banner strong { color: #fff; font: 400 17px/1.1 "Lilita One", sans-serif; letter-spacing: .02em; }
#hold-banner .hb-copy span { color: #99a0a2; font-size: 13px; }
#hold-banner .hb-reason { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; color: #fff; font-size: 13px; }
#hold-banner .hb-reason b { padding: 1px 8px; border-radius: 99px; background: #3a2226; color: #ff8a92; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
#hold-banner button { flex: none; padding: 9px 16px; border-radius: 10px; background: #4d8ee7; box-shadow: 0 3px 0 #2a5c9f; color: #fff; }
@media (max-width: 640px) { #hold-banner { flex-wrap: wrap; } #hold-banner button { margin-left: 48px; } }

/* Account hold banner, take two: no red edge, solid red badge with a black mark. */
#hold-banner, .casino-wallet-error { box-shadow: 0 4px 0 #0007 !important; }
#hold-banner .hb-icon { border-radius: 50%; background: #e5484d; color: #111; font-family: "Lilita One", sans-serif; }
.casino-wallet-error::before { border-radius: 50%; background: #e5484d; color: #111; }
/* Shop in real credits: gold coins and gold buttons. */
.home-shop .pe-coin { transform: translateY(1px); }
.home-shop.cr .pe-coin { filter: none; }
.home-shop.cr .hs-btn:not(.owned):not(.on) { background: #f2c14e; box-shadow: 0 4px 0 #a8801a; color: #1a1405; }
/* Credits mode buttons: a deeper amber so the gold coin stands out. */
.home-shop.cr .hs-btn:not(.owned):not(.on) { background: #8a6a24; box-shadow: 0 4px 0 #5c4616; color: #fff; }
.home-shop.cr .hs-btn:not(.owned):not(.on):hover { background: #98762b; }
.home-shop.cr .hs-btn .pe-coin { filter: drop-shadow(0 1px 0 #0006); }
#hold-banner .hb-reason b { background: #e5484d; color: #111; }
/* Credits mode, final: bright saturated yellow buttons, and every shop coin gets a clean dark outline so it stands out. */
.home-shop.cr .hs-btn:not(.owned):not(.on) { background: #ffc81f; box-shadow: 0 4px 0 #c78f0a; color: #1a1200; }
.home-shop.cr .hs-btn:not(.owned):not(.on):hover { background: #ffd23f; }
.home-shop.cr .pe-coin { filter: drop-shadow(1px 0 0 #4a3000) drop-shadow(-1px 0 0 #4a3000) drop-shadow(0 1px 0 #4a3000) drop-shadow(0 -1px 0 #4a3000); }
.hs-swap.credits { background: #ffc81f; box-shadow: inset 0 -3px 0 #c78f0a; }

.home-shop.cr .hs-btn:not(.owned):not(.on) { background: #e6b83c; box-shadow: 0 4px 0 #a8801a; }
.home-shop.cr .hs-btn:not(.owned):not(.on):hover { background: #edc254; }
.hs-swap.credits { background: #e6b83c; box-shadow: inset 0 -3px 0 #a8801a; }

.crash-live-name .bdg-slot { display: inline-flex; align-items: center; }
.crash-live-name .bdg-medal.mini { margin: 0 0 0 1px; }

/* ===== Chat bubbles, redesigned: one family. Solid colour, matching text, a dark lip underneath and a faint lit top edge.
   Higher tiers add one considered detail each (inner stroke, pattern, mark), never more than that. ===== */
/* Bubbles never shrink inside the chat's flex column (overflow:hidden skins like Hazard were being squashed flat). */
.chat-msg { flex: none; min-height: min-content; }
.chat-msg[class*="bb-"] { --bg: #343a41; --fg: #eef1f3; --lip: #181b1f; --hi: #ffffff2e; background: var(--bg); color: var(--fg); box-shadow: 0 4px 0 var(--lip), inset 0 1px 0 var(--hi); text-shadow: none; transform: none; outline: 0; font-family: var(--body); font-weight: 600; overflow: visible; }
.chat-msg[class*="bb-"]::before, .chat-msg[class*="bb-"]::after { content: none; }
.chat-msg.bb-mint { --bg: #4fd9a0; --fg: #07281b; --lip: #229468; }
.chat-msg.bb-grape { --bg: #9a77f0; --fg: #fff; --lip: #5a3bb5; }
.chat-msg.bb-matcha { --bg: #bddca4; --fg: #1f3a14; --lip: #82ad64; }
.chat-msg.bb-cocoa { --bg: #7a5238; --fg: #f6e6d3; --lip: #43291a; --hi: #ffffff1f; }
.chat-msg.bb-coral { --bg: #ff8576; --fg: #3a0f0a; --lip: #c4493a; }
.chat-msg.bb-sky { --bg: #93d2ff; --fg: #08304d; --lip: #4a9ad6; }
.chat-msg.bb-lemon { --bg: #ffe680; --fg: #3d2f00; --lip: #d0ac1f; --hi: #fffa; }
.chat-msg.bb-ocean { --bg: #2c6fc0; --fg: #eaf5ff; --lip: #164a8a; }
.chat-msg.bb-sunset { --bg: #ff8f4a; --fg: #3a1200; --lip: #e04b7d; }
.chat-msg.bb-stealth { --bg: #1a1d21; --fg: #aeb6bd; --lip: #000; box-shadow: 0 4px 0 #000, inset 0 1px 0 #ffffff14; }
.chat-msg.bb-paper { --bg: #f3f5f8; --fg: #1e242b; --lip: #b4bdc8; --hi: #fff; }
.chat-msg.bb-midnight { --bg: #18213a; --fg: #d4e3ff; --lip: #090e1c; box-shadow: 0 4px 0 #090e1c, inset 0 0 0 1.5px #31456e; }
.chat-msg.bb-rose { --bg: #ff86b8; --fg: #3d0a22; --lip: #c24d86; }
.chat-msg.bb-candy { background: repeating-linear-gradient(45deg, #ff93c4 0 9px, #ffa9d2 9px 18px); --fg: #4a0f2c; --lip: #c24d86; }
.chat-msg.bb-polka { background-color: #ff77ab; background-image: radial-gradient(#ffffff55 20%, #0000 22%); background-size: 16px 16px; --fg: #3f0b25; --lip: #c24d86; }
.chat-msg.bb-notebook { background-color: #fbfbf6; background-image: repeating-linear-gradient(#0000 0 19px, #d3e2f4 19px 20px); --fg: #1f2d45; box-shadow: 0 4px 0 #b9c1cb, inset 3px 0 0 #ff8a8a; }
.chat-msg.bb-tape { --bg: #dcc093; --fg: #3b2a14; --lip: #a2824f; }
.chat-msg.bb-tape::before, .chat-msg.bb-tape::after { content: ''; position: absolute; top: -6px; width: 30px; height: 11px; background: #f6edb0b8; }
.chat-msg.bb-tape::before { left: 12px; transform: rotate(-5deg); }
.chat-msg.bb-tape::after { right: 12px; transform: rotate(4deg); }
.chat-msg.bb-ice { --bg: #dff5ff; --fg: #0b3a55; box-shadow: 0 4px 0 #86cdee, inset 0 0 0 1.5px #fff; }
.chat-msg.bb-camo { background-color: #5b6b3a; background-image: radial-gradient(circle at 20% 30%, #46552b 0 15px, #0000 16px), radial-gradient(circle at 72% 62%, #78874f 0 13px, #0000 14px), radial-gradient(circle at 48% 90%, #35431f 0 11px, #0000 12px); --fg: #f0f3e0; --lip: #2d3a1b; }
.chat-msg.bb-stickynote { --bg: #ffe978; --fg: #4a3a00; --lip: #d0b02a; }
.chat-msg.bb-stickynote::after { content: ''; position: absolute; right: 0; bottom: 0; border-style: solid; border-width: 0 0 13px 13px; border-color: #0000 #0000 #e3c53a #0000; }
.chat-msg.bb-mono { --bg: #fff; --fg: #0c0c0c; box-shadow: 0 4px 0 #0c0c0c, inset 0 0 0 2px #0c0c0c; }
.chat-msg.bb-pixel { border-radius: 4px !important; --bg: #0f1a2b; --fg: #8fe8ff; font-family: ui-monospace, Menlo, Consolas, monospace; box-shadow: 0 4px 0 #2f93b3, inset 0 0 0 2px #8fe8ff; }
.chat-msg.bb-checker { --bg: #14171a; --fg: #fff; --lip: #000; overflow: hidden; padding-bottom: 20px; }
.chat-msg.bb-checker::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: repeating-conic-gradient(#fff 0 25%, #14171a 0 50%) 0 0 / 8px 8px; }
.chat-msg.bb-hazard { --bg: #ffd23a; --fg: #14171a; --lip: #8a6a00; overflow: hidden; padding-bottom: 20px; font-weight: 800; }
.chat-msg.bb-hazard::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: repeating-linear-gradient(45deg, #14171a 0 8px, #ffd23a 8px 16px); }
.chat-msg.bb-chalk { --bg: #2f4a3c; --fg: #f3f6ef; box-shadow: 0 4px 0 #1b2e24, inset 0 0 0 2px #f3f6ef44; }
.chat-msg.bb-heart { --bg: #ff6b9a; --fg: #fff; --lip: #c23a68; }
.chat-msg.bb-heart::before { content: "\2665"; position: absolute; left: -4px; top: -8px; color: #fff; font-size: 16px; line-height: 1; text-shadow: 0 2px 0 #c23a68; }
.chat-msg.bb-retro { --bg: #f6ead2; --fg: #3a2a1a; font-family: Georgia, "Times New Roman", serif; box-shadow: 0 4px 0 #d95c3c, inset 0 0 0 1.5px #3a2a1a; }
.chat-msg.bb-galaxy { background-color: #1a1233; background-image: radial-gradient(#ffffffcc 1px, #0000 1.6px), radial-gradient(#b9a3ff 1px, #0000 1.6px); background-size: 26px 26px; background-position: 0 0, 13px 13px; --fg: #e8e0ff; box-shadow: 0 4px 0 #0b0820, inset 0 0 0 1.5px #4a3a8a; }
.chat-msg.bb-lava { --bg: #3b1010; --fg: #ffdcb0; box-shadow: 0 4px 0 #1a0505, inset 0 0 0 1.5px #ff6a1f; }
.chat-msg.bb-terminal { --bg: #0b0f0c; --fg: #5dff8f; font-family: ui-monospace, Menlo, Consolas, monospace; box-shadow: 0 4px 0 #05140a, inset 0 0 0 1.5px #1f6b3a; }
.chat-msg.bb-neon { --bg: #0b1013; --fg: #eafff6; box-shadow: 0 4px 0 #0a3a2a, inset 0 0 0 2px #3dffb0; }
.chat-msg.bb-cyber { --bg: #0e1120; --fg: #fff; box-shadow: 0 4px 0 #05060c, inset 2px 0 0 #ff2e97, inset -2px 0 0 #00e5ff; }
.chat-msg.bb-sticker { --bg: #fff; --fg: #14171a; box-shadow: 0 0 0 2px #14171a, 0 5px 0 2px #0009; }
.chat-msg.bb-arcade { --bg: #0b0b16; --fg: #ffe14a; font-family: ui-monospace, Menlo, Consolas, monospace; box-shadow: 0 4px 0 #000, inset 0 0 0 2px #ff2e97; }
.chat-msg.bb-comic { --bg: #fff; --fg: #14171a; box-shadow: 3px 4px 0 #14171a, inset 0 0 0 2.5px #14171a; font-weight: 800; }
.chat-msg.bb-gold { --bg: #ffd23a; --fg: #3d2c00; --lip: #b0840a; --hi: #ffeb9acc; }
.chat-msg.bb-royal { --bg: #4a2fa3; --fg: #ffe27a; box-shadow: 0 4px 0 #231366, inset 0 0 0 2px #ffd23a; }
.chat-msg.bb-diamond { background-color: #c4f4ff; background-image: linear-gradient(135deg, #ffffff88 0 16%, #0000 16% 40%, #ffffff55 40% 46%, #0000 46%); --fg: #0a4a5a; box-shadow: 0 4px 0 #5cc8e6, inset 0 0 0 1.5px #fff; }
.chat-msg.bb-platinum { --bg: #e6eaee; --fg: #2a3138; box-shadow: 0 4px 0 #7e8892, inset 0 0 0 2px #fff, inset 0 0 0 3.5px #b4bcc5; }
.chat-msg.bb-obsidian { --bg: #14101c; --fg: #e9ddff; box-shadow: 0 4px 0 #07050c, inset 0 0 0 1.5px #7a4bff; }
.chat-msg.bb-ember { background-color: #1c1210; background-image: radial-gradient(#ff7a1f 1.4px, #0000 2px), radial-gradient(#ffb03d 1px, #0000 1.6px); background-size: 30px 30px, 22px 22px; background-position: 4px 14px, 13px 3px; --fg: #ffd9b3; box-shadow: 0 4px 0 #0a0605, inset 0 0 0 1.5px #ff7a1f; }
.chat-msg.bb-legend { --bg: #ffd23a; --fg: #3a2a00; font-weight: 800; box-shadow: 0 4px 0 #8a5f06, inset 0 0 0 2px #fff2a8, inset 0 0 0 4px #c48f0b; }
.chat-msg.bb-legend::after { content: ''; position: absolute; right: 12px; top: -13px; width: 24px; height: 17px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath d='M2 14 L3 3 L8 8 L11 1 L14 8 L19 3 L20 14Z' fill='%23fff2a8' stroke='%238a5f06' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.hs-bubble[class*="bb-"] { transform: none; }

/* Toxic frame: just the ring, no small dots around it. */
.fr-toxic::after { content: none !important; display: none !important; background: none !important; }

/* Royal win popup: no crown. */
.win-popup.wp-royal::before { content: none !important; display: none !important; }
/* Messages thread header: profile picture + name, both open that person's profile. */
.dm-who { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.dm-who .dm-title { min-width: 0; }
.dm-who:hover strong { text-decoration: underline; }
.dm-pic { flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: #2a2f34; }
.dm-pic-initial { display: grid; place-items: center; color: #fff; font: 400 16px "Lilita One", sans-serif; }
/* Credits-mode coin: an even dark outline on every side (an older rule left only a shadow underneath, which made it look off-centre). */
.home-shop.cr .pe-coin, .home-shop.cr .hs-btn .pe-coin, .home-shop.cr .hs-bal .pe-coin { filter: drop-shadow(1px 0 0 #4a3000) drop-shadow(-1px 0 0 #4a3000) drop-shadow(0 1px 0 #4a3000) drop-shadow(0 -1px 0 #4a3000); transform: translateY(1px); }

/* GBuckss coin in the shop: the same clean dark outline as the credits coin. */
.home-shop:not(.cr) .pe-coin { filter: hue-rotate(175deg) saturate(1.15) drop-shadow(1px 0 0 #0a0f1a) drop-shadow(-1px 0 0 #0a0f1a) drop-shadow(0 1px 0 #0a0f1a) drop-shadow(0 -1px 0 #0a0f1a); }

/* Wallet popover: gold coin in Credits, blue in Game; credits -> GBucks converter. */
.wallet-big-coin.gold { filter: none; }
.wallet-convert { display: grid; gap: 10px; margin: 12px 16px 0; padding: 14px; border-radius: 14px; background: #22262a; box-shadow: 0 4px 0 #0007; }
.wallet-convert[hidden] { display: none; }
.wc-label { color: #c3c9cd; font: 700 12px var(--body); letter-spacing: .03em; }
.wc-row { display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr); align-items: center; gap: 8px; }
.wc-field { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 6px 0 12px; border: 1px solid #343a41; border-radius: 12px; background: #15181b; }
.wc-field:focus-within { border-color: #4d8ee7; }
.wc-field input { flex: 1; min-width: 0; width: 100%; border: 0; outline: 0; background: none; color: #fff; font: 400 18px "Lilita One", sans-serif; box-shadow: none; }
.wc-field input::-webkit-inner-spin-button { appearance: none; }
.wc-field button { flex: none; padding: 5px 8px; border: 0; border-radius: 8px; background: #2f353b; box-shadow: 0 2px 0 #0007; color: #c3c9cd; font: 700 11px var(--body); cursor: pointer; }
.wc-field button:hover:not(:disabled) { background: #3a4147; color: #fff; }
.wc-coin { flex: none; width: 20px; height: 20px; }
.wc-coin.blue { filter: hue-rotate(175deg) saturate(1.15); }
.wc-arrow { width: 20px; height: 20px; color: #848b8d; }
.wc-out { display: flex; align-items: center; justify-content: flex-end; gap: 6px; height: 44px; padding: 0 12px; border-radius: 12px; background: #1a1d20; color: #fff; font: 400 18px "Lilita One", sans-serif; font-variant-numeric: tabular-nums; overflow: hidden; }
.wallet-convert small { color: #848b8d; font: 600 11px var(--body); text-align: center; }
.wc-submit { width: 100%; }

/* Royal avatar frame, remade: a purple and gold ring with one small crown, no oversized wings. */
.fr-royal::after { inset: auto !important; left: 50% !important; top: -22% !important; width: 46% !important; height: 32% !important; transform: translateX(-50%); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 32'%3E%3Cpath d='M4 28 L2 8 L14 17 L23 3 L32 17 L44 8 L42 28Z' fill='%23ffd23a' stroke='%238a5f06' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='2.500' cy='8' r='2.600' fill='%23b79cff' stroke='%236a4ae0' stroke-width='1.200'/%3E%3Ccircle cx='23' cy='3.500' r='2.800' fill='%23b79cff' stroke='%236a4ae0' stroke-width='1.200'/%3E%3Ccircle cx='43.500' cy='8' r='2.600' fill='%23b79cff' stroke='%236a4ae0' stroke-width='1.200'/%3E%3C/svg%3E"); background-size: 100% 100%; filter: drop-shadow(0 1px 1px #0006); }

/* Balance popup: wider, tidier converter, avatar (with frame) in the corner. */
.wallet-popover { width: 400px; max-width: calc(100vw - 24px); }
.wallet-popover .popover-heading { overflow: visible; }
.wallet-popover .popover-heading > #wallet-username { overflow: visible; max-width: none; }
.wallet-avatar { position: relative; display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: #2a2f34; color: #fff; font: 400 15px "Lilita One", sans-serif; }
.wallet-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.wallet-convert { margin: 12px 14px 0; }
.wallet-convert .wc-row { grid-template-columns: minmax(0, 1.15fr) 18px minmax(0, 1fr); }
.wallet-convert .wc-field input { font-size: 17px; }
.wallet-convert .wc-submit { display: block; width: 100%; height: 42px; margin: 2px 0 0 !important; }
.wallet-popover > #wallet-add-link { margin: 10px 14px 4px; }

/* Live wins: names keep their descenders (g, y, p) instead of being clipped at the bottom. */
.lw-user { padding: 2px 1px 4px; line-height: 1.3; }
/* Inferno frame: just the burning ring, no spikes. */
.fr-flame::after { content: none !important; display: none !important; background: none !important; animation: none !important; }
/* Shop cards: the entrance animation must not keep controlling the card afterwards, or hover can only snap (the "View more" cards had no such hold). */
.hs-card.hs-anim, .hs-collapse.instant .hs-card.hs-anim { animation-fill-mode: backwards; }

/* Small avatars (Crash live bets, balance popup): the frame ring scales down so it matches the picture instead of looking heavy. */
.crash-live-av[class*="fr-"]::before, .wallet-avatar[class*="fr-"]::before { inset: -3px !important; -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 2.5px), #000 calc(100% - 2px)) !important; mask: radial-gradient(farthest-side, #0000 calc(100% - 2.5px), #000 calc(100% - 2px)) !important; }
.crash-live-av[class*="fr-"], .wallet-avatar[class*="fr-"] { box-shadow: 0 0 0 1px #15181b !important; }

/* Edit profile: a "no badge" tile at the start of the badge row. */
.pe-badge-none { color: #8f979e; }
.pe-badge-none svg { width: 24px; height: 24px; }
.pe-badge-none.on { background: #3a4047; color: #fff; }

/* ===== Balance popup, tidied: one 16px rhythm, matching 44px buttons, Convert is the main action and Add credits the quiet one. ===== */
.wallet-popover { padding: 0 0 16px; }
.wallet-popover .popover-heading { padding: 16px 18px 12px; }
.wallet-popover .wallet-toggle { margin: 0 16px; }
.wallet-popover .wallet-conversion { margin: 12px 16px 0; padding: 22px 12px; }
.wallet-popover .wallet-convert { gap: 10px; margin: 16px 16px 0; padding: 0; background: none; box-shadow: none; }
.wallet-popover .wc-label { color: #99a0a2; font: 700 11px var(--body); letter-spacing: .06em; text-transform: uppercase; }
.wallet-popover .wc-field, .wallet-popover .wc-out { height: 46px; border-radius: 12px; }
.wallet-popover .wc-out { background: #15181b; border: 1px solid #2c3238; }
.wallet-popover .wallet-convert small { margin-top: -2px; }
.wallet-popover .wc-submit { height: 44px; margin: 0 !important; border-radius: 10px; font: 700 14px var(--body); }
.wallet-popover > #wallet-add-link { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; margin: 10px 16px 0; padding: 0; border-radius: 10px; background: #2a2f34; box-shadow: inset 0 -3px 0 #0007; color: #fff; font: 700 14px var(--body); transition: background-color .2s ease, transform .2s ease; }
.wallet-popover > #wallet-add-link:hover { background: #343a41; }
.wallet-popover > #wallet-add-link:active { transform: translateY(1px); }
.wallet-popover > #wallet-add-link[hidden] { display: none; }
.wallet-popover > #wallet-add-link img { width: 15px; height: 15px; }
.wallet-popover .play-note { margin: 12px 18px 0; }

/* Gift an account: a gift button beside a slimmer Choose button, and the gift dialog. */
.acc-actions { display: inline-flex; align-items: center; gap: 8px; }
.acc-actions .acc-btn { height: 38px; padding: 0 13px; gap: 6px; font-size: 12.5px; }
.gift-btn { display: grid; flex: none; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 8px; background: #2a2f34; box-shadow: 0 3px 0 #0007; color: #fff; cursor: pointer; transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.gift-btn svg { width: 19px; height: 19px; transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
.gift-btn:hover { background: #363c42; }
.gift-btn:hover svg { transform: rotate(-8deg) scale(1.08); }
.gift-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #0007; }
.gift-btn:focus-visible { outline: 2px solid #7eb1f3; outline-offset: 2px; }
.gift-dialog .gift-field { display: grid; gap: 7px; margin: 14px 0 0; }
.gift-dialog .gift-field span { color: #c3c9cd; font: 700 12px var(--body); letter-spacing: .03em; }
.gift-dialog .gift-field input { height: 46px; padding: 0 14px; border: 1px solid #2c3238; border-radius: 12px; background: #15181b; color: #fff; font: 600 15px var(--body); outline: 0; }
.gift-dialog .gift-field input:focus { border-color: #4d8ee7; }
.gift-dialog .gift-note { margin: 12px 0 0; color: #848b8d; font: 500 12px/1.5 var(--body); }
.gift-dialog .auth-error { margin: 10px 0 0; }

.wallet-avatar[role="button"] { cursor: pointer; }

.wallet-popover .popover-heading { border-bottom: 0; }

/* Gift message field */
.gift-dialog .gift-field em { color: #848b8d; font-style: normal; font-weight: 600; }
.gift-dialog .gift-field textarea { min-height: 64px; padding: 11px 14px; border: 1px solid #2c3238; border-radius: 12px; background: #15181b; color: #fff; font: 600 14px/1.45 var(--body); outline: 0; resize: none; }
.gift-dialog .gift-field textarea:focus { border-color: #4d8ee7; }
.gift-dialog .gift-field small { color: #848b8d; font: 600 11px var(--body); text-align: right; }

/* Gifts page */
.gifts-list { display: grid; gap: 14px; }
.gift-card { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 16px 18px; border-radius: 18px; background: #22262a; box-shadow: 0 5px 0 #0007; transition: transform .3s cubic-bezier(.22, 1, .36, 1), background-color .3s ease; }
.gift-card:hover { background: #292e33; transform: translateY(-2px); }
.gift-card.new { box-shadow: 0 5px 0 #0007, inset 0 0 0 2px #4d8ee7; }
.gift-art { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 16px; background: #1a1d20; }
.gift-art img { width: 56px; height: 56px; object-fit: contain; }
.gift-body { display: grid; gap: 6px; min-width: 0; }
.gift-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.gift-top strong { color: #fff; font: 400 20px/1.1 "Lilita One", sans-serif; letter-spacing: .01em; }
.gift-new { padding: 2px 8px; border-radius: 99px; background: #4d8ee7; color: #fff; font: 800 10px var(--body); letter-spacing: .06em; text-transform: uppercase; }
.gift-from { color: #99a0a2; font: 600 13px var(--body); }
.gift-from b { color: #fff; font-weight: 700; }
.gift-msg { display: block; width: fit-content; max-width: 100%; margin: 2px 0 0; padding: 9px 13px; border-radius: 14px 14px 14px 4px; background: #2f353b; box-shadow: 0 3px 0 #15181b; color: #e6e9ec; font: 600 14px/1.45 var(--body); overflow-wrap: anywhere; white-space: pre-wrap; }
.gift-date { color: #6f777c; font: 600 12px var(--body); }
.gift-view { height: 42px; padding: 0 20px; border: 0; border-radius: 10px; background: #4d8ee7; box-shadow: 0 4px 0 #2a5c9f; color: #fff; font: 700 14px var(--body); cursor: pointer; transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.gift-view:hover { background: #5b9aef; }
.gift-view:active { transform: translateY(2px); box-shadow: 0 2px 0 #2a5c9f; }
.gift-view:disabled { opacity: .6; cursor: wait; }
.gifts-empty { display: grid; justify-items: center; gap: 8px; padding: 46px 20px; border-radius: 18px; background: #22262a; box-shadow: 0 5px 0 #0007; text-align: center; }
.gifts-empty img { width: 92px; height: 92px; object-fit: contain; }
.gifts-empty strong { color: #fff; font: 400 22px "Lilita One", sans-serif; }
.gifts-empty span { color: #99a0a2; font: 600 14px var(--body); }
@media (max-width: 640px) { .gift-card { grid-template-columns: 56px minmax(0, 1fr); } .gift-art { width: 56px; height: 56px; } .gift-art img { width: 42px; height: 42px; } .gift-view { grid-column: 1 / -1; width: 100%; } }

#gifts-title { margin: 0 0 20px; }

/* Header unit switch: Credits, USD and GBucks share one size, position and letter spacing; only the colour changes. */
.wallet-swap span, .wallet-swap[aria-pressed="true"] span, .wallet-swap[aria-pressed="false"] span { font-size: 10px; line-height: 1; letter-spacing: .04em; }
.wallet-swap.game-mode[aria-pressed="true"] { background: #4d8ee7; box-shadow: inset 0 -3px 0 #2a5c9f; color: #fff; }
.wallet-swap.game-mode[aria-pressed="true"]:hover { background: #5b9aef; }

/* Continue with Google: same flat dark button family as the other sign-in buttons (no circle-reveal hover). */
.google-signin { min-height: 46px; gap: 10px; overflow: visible; isolation: auto; border: 0; border-radius: 10px; background: #2a2f34; box-shadow: inset 0 -3px 0 #0007; color: #fff; font: 700 14px var(--body); transition: background-color .2s ease, transform .2s ease; }
.google-signin::before { display: none !important; }
.google-signin:hover, .google-signin:focus-visible { background: #343a41; color: #fff; border: 0; }
.google-signin:active { transform: translateY(1px); }
.google-signin:focus-visible { outline: 2px solid #7eb1f3; outline-offset: 2px; }
.google-signin svg { width: 18px; height: 18px; flex: none; }

/* Staff badge: a regular round medal in the badge family, in staff red (the old custom shield is gone). */
.bdg-medal.staff, .bdg-medal.mini.staff { --c: #e5484d; --edge: #a52b32; --ink: #fff; animation: none; }
.wallet-popover .wc-label { color: #fff; font: 400 17px/1.1 "Lilita One", sans-serif; letter-spacing: .02em; text-transform: none; }

/* Booster banner: steady, no glow pulse. */
.bx-10, .hs-boost-banner { animation: none !important; }

/* Staff badge: nudge the shield down and slightly left so it sits optically centred in the medal (the medal lip pulls the eye up and right). */
.bdg-medal.staff svg, .bdg-medal.mini.staff svg { transform: translate(-.5px, .8px); }

/* Site-wide text boxes: one clean focus colour on the box itself, never a second square ring. */
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 0; }

/* Staff badge glyph is now symmetric, so no optical nudge. */
.bdg-medal.staff svg, .bdg-medal.mini.staff svg { transform: none; }

/* Small badges: snap the glyph to whole pixels so it sits exactly in the middle of the medal (a fractional 10.8px size blurred it off-centre in lists). */
.bdg-medal.mini svg { width: 10px; height: 10px; }
@supports (width: round(nearest, 60%, 2px)) { .bdg-medal.mini svg { width: round(nearest, 60%, 2px); height: round(nearest, 60%, 2px); } }
.bdg-medal.mini { display: grid; place-items: center; }

/* Error messages: a solid clean red panel with dark text (no more see-through panel with red text). */
.auth-error:not([hidden]), .username-dialog .auth-error:not([hidden]), .gift-dialog .auth-error:not([hidden]), .sl-error:not([hidden]), .pe-msg.show.bad, .stake-error {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; background: #e5484d !important; color: #17090b !important; font-size: 13px; font-weight: 700; line-height: 1.35; text-align: left; box-shadow: 0 3px 0 #9c2a30; }
.username-dialog .auth-error::before { background: #17090b; color: #e5484d; }
.pe-msg.show.bad { display: block; }

/* ===================================================================================
   More avatar frames and name colours.
   Frames: s_* are plain or two-tone rings, a_* are animated or designed. One shared ring geometry, colour comes from --ring.
   =================================================================================== */
[class*="fr-s_"], [class*="fr-a_"] { position: relative; overflow: visible !important; box-shadow: 0 0 0 2px #15181b !important; animation: none; }
[class*="fr-s_"]::before, [class*="fr-a_"]::before { content: ""; position: absolute; inset: -6px; z-index: 1; border-radius: 50%; pointer-events: none; background: var(--ring, #fff);
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 5px), #000 calc(100% - 4.5px)); mask: radial-gradient(farthest-side, #0000 calc(100% - 5px), #000 calc(100% - 4.5px)); }
[class*="fr-a_"]::after { content: ""; position: absolute; inset: -6px; z-index: 2; border-radius: 50%; pointer-events: none; }

/* plain colours */
.fr-s_black { --ring: linear-gradient(135deg, #34343b, #050506); } .fr-s_black::before { filter: drop-shadow(0 0 .7px #ffffffa0); }
.fr-s_white { --ring: #f5f6f8; } .fr-s_red { --ring: #e5484d; } .fr-s_blue { --ring: #4d8ee7; } .fr-s_green { --ring: #3dbe7e; }
.fr-s_yellow { --ring: #ffd23a; } .fr-s_orange { --ring: #ff8a3d; } .fr-s_pink { --ring: #ff7eb6; } .fr-s_purple { --ring: #9a77f0; }
.fr-s_grey { --ring: #7e8791; } .fr-s_teal { --ring: #2fc9c0; } .fr-s_brown { --ring: #8a5a3b; } .fr-s_navy { --ring: #1f3f8a; }
.fr-s_maroon { --ring: #8a1f2b; } .fr-s_lime { --ring: #a6e22e; } .fr-s_sky { --ring: #7ec8ff; }
/* two-tone */
.fr-s_sunrise { --ring: linear-gradient(135deg, #ff9a4d, #ff4d6d); } .fr-s_peachy { --ring: linear-gradient(135deg, #ffb38a, #ff7eb6); }
.fr-s_deepsea { --ring: linear-gradient(135deg, #2f7bd8, #35d0c8); } .fr-s_forest { --ring: linear-gradient(135deg, #1f8a4c, #9be15d); }
.fr-s_berry { --ring: linear-gradient(135deg, #c2358a, #6a3bd8); } .fr-s_floss { --ring: linear-gradient(135deg, #ff9ad5, #8ad4ff); }
.fr-s_gunmetal { --ring: linear-gradient(135deg, #3a4048, #8f979e); } .fr-s_steel { --ring: linear-gradient(135deg, #e6ebef, #6b7683); }
.fr-s_copper { --ring: linear-gradient(135deg, #f0a870, #8a4a22); } .fr-s_iceberg { --ring: linear-gradient(135deg, #e6f8ff, #4db8ff); }
.fr-s_midnight { --ring: linear-gradient(135deg, #1b2a5c, #6a5cff); } .fr-s_dusk { --ring: linear-gradient(135deg, #ff7a59, #6a3bd8); }

@keyframes x-spin { to { transform: rotate(360deg); } }
@keyframes x-spin-rev { to { transform: rotate(-360deg); } }
@keyframes x-hue { to { filter: hue-rotate(360deg); } }
@keyframes x-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes x-flicker { 0%, 100% { opacity: 1; } 8% { opacity: .5; } 12% { opacity: 1; } 55% { opacity: 1; } 58% { opacity: .4; } 62% { opacity: 1; } }
@keyframes x-breathe { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
@keyframes x-halo { 0% { transform: scale(1); opacity: .65; } 100% { transform: scale(1.55); opacity: 0; } }

/* animated / designed */
.fr-a_spinfire { --ring: conic-gradient(#ff3d1f, #ffb03d, #ffe27a, #ff8a1f, #ff3d1f); } .fr-a_spinfire::before { animation: x-spin 4s linear infinite; }
.fr-a_ghost { --ring: #e8f0ff; } .fr-a_ghost::before { animation: x-breathe 2.4s ease-in-out infinite; filter: drop-shadow(0 0 2px #ffffff88); }
.fr-a_glacier { --ring: conic-gradient(#bfefff, #ffffff, #6ac8ff, #e6f8ff, #bfefff); } .fr-a_glacier::before { animation: x-spin 7s linear infinite; }
.fr-a_heartbeat { --ring: linear-gradient(135deg, #ff3b5c, #ff8fa3); } .fr-a_heartbeat::before { animation: x-pulse 1.1s ease-in-out infinite; }
.fr-a_radar { --ring: #1d5a3b; }
.fr-a_radar::after { background: conic-gradient(#0000 0 240deg, #3dff88 358deg, #0000 360deg); animation: x-spin 2.4s linear infinite;
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 5px), #000 calc(100% - 4.5px)); mask: radial-gradient(farthest-side, #0000 calc(100% - 5px), #000 calc(100% - 4.5px)); }
.fr-a_voltage { --ring: conic-gradient(#35e0ff, #ffffff, #2e6bff, #35e0ff); } .fr-a_voltage::before { animation: x-spin 1.8s linear infinite, x-flicker 3s steps(1) infinite; }
.fr-a_matrix { --ring: repeating-conic-gradient(#39ff88 0 10deg, #0000 10deg 20deg); } .fr-a_matrix::before { animation: x-spin 8s linear infinite; }
.fr-a_orbit { --ring: #6aa3ee66; }
.fr-a_orbit::after { inset: -6px; background: radial-gradient(circle at 50% 3px, #fff 0 2.6px, #0000 3.2px), radial-gradient(circle at 93.3% 75%, #7ab4ff 0 2.6px, #0000 3.2px), radial-gradient(circle at 6.7% 75%, #ff7ab8 0 2.6px, #0000 3.2px); animation: x-spin 5s linear infinite; }
.fr-a_ripple { --ring: #2fc9c0; } .fr-a_ripple::after { border: 2px solid #2fc9c0; inset: -6px; animation: x-halo 2.4s ease-out infinite; }
.fr-a_thunder { --ring: linear-gradient(135deg, #ffe14a, #fff6a8); } .fr-a_thunder::before { animation: x-flicker 2.2s steps(1) infinite; }
.fr-a_blossom { --ring: linear-gradient(135deg, #ff9ac1, #ffc6dc); }
.fr-a_blossom::after { inset: -14px; background: radial-gradient(circle at 50% 6%, #ffd3e4 0 2.4px, #ff8fb8 2.6px 3.6px, #0000 4px), radial-gradient(circle at 91.8% 36.4%, #ffd3e4 0 2.4px, #ff8fb8 2.6px 3.6px, #0000 4px), radial-gradient(circle at 75.9% 85.6%, #ffd3e4 0 2.4px, #ff8fb8 2.6px 3.6px, #0000 4px), radial-gradient(circle at 24.1% 85.6%, #ffd3e4 0 2.4px, #ff8fb8 2.6px 3.6px, #0000 4px), radial-gradient(circle at 8.2% 36.4%, #ffd3e4 0 2.4px, #ff8fb8 2.6px 3.6px, #0000 4px); animation: x-spin 16s linear infinite; }
.fr-a_hologram { --ring: conic-gradient(#7affe3, #7a8bff, #ff7aef, #ffe27a, #7affe3); } .fr-a_hologram::before { animation: x-spin 6s linear infinite, x-hue 5s linear infinite; }
.fr-a_obsidian { --ring: conic-gradient(#0b0b10, #26262f, #0b0b10, #3b3b49, #0b0b10); } .fr-a_obsidian::before { filter: drop-shadow(0 0 .6px #ffffff77); }
.fr-a_obsidian::after { background: conic-gradient(#0000 0 330deg, #ffffffd0 346deg, #0000 360deg); animation: x-spin 3.4s linear infinite;
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 5px), #000 calc(100% - 4.5px)); mask: radial-gradient(farthest-side, #0000 calc(100% - 5px), #000 calc(100% - 4.5px)); }
.fr-a_comet { --ring: #ffffff2e; }
.fr-a_comet::after { background: conic-gradient(#0000 0 270deg, #ffffff 359deg, #0000 360deg); animation: x-spin 2.8s linear infinite;
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 5px), #000 calc(100% - 4.5px)); mask: radial-gradient(farthest-side, #0000 calc(100% - 5px), #000 calc(100% - 4.5px)); }
.fr-a_void { --ring: conic-gradient(#0b0714, #3a1a6a, #0b0714, #6a3bd8, #0b0714); } .fr-a_void::before { animation: x-spin 6s linear infinite; }
.fr-a_void::after { background: radial-gradient(circle at 50% 3px, #c9b3ff 0 2.6px, #0000 3.2px); animation: x-spin-rev 4s linear infinite; }
.fr-a_borealis { --ring: conic-gradient(#3dffb0, #4d8ee7, #9a4dff, #3dffb0); } .fr-a_borealis::before { animation: x-spin 8s linear infinite, x-hue 6s ease-in-out infinite alternate; }
.fr-a_magma { --ring: conic-gradient(#2a0a08 0 40deg, #ff5a1f 70deg, #ffd24a 90deg, #ff5a1f 110deg, #2a0a08 140deg 220deg, #ff5a1f 250deg, #ffd24a 270deg, #ff5a1f 290deg, #2a0a08 320deg); } .fr-a_magma::before { animation: x-spin 5s linear infinite; }
.fr-a_solar { --ring: conic-gradient(#ffe27a, #ffb03d, #fff2a8, #ffc933, #ffe27a); } .fr-a_solar::before { animation: x-spin 8s linear infinite; }
.fr-a_solar::after { inset: -11px; background: repeating-conic-gradient(#ffd23a 0 4deg, #0000 4deg 15deg); animation: x-spin-rev 14s linear infinite;
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 calc(100% - 3.5px)); mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 calc(100% - 3.5px)); }
.fr-a_icefire { --ring: conic-gradient(#35b0ff 0 70deg, #bfefff 90deg, #35b0ff 110deg 170deg, #ff3d1f 190deg, #ffd24a 270deg, #ff3d1f 350deg, #35b0ff 360deg); } .fr-a_icefire::before { animation: x-spin 6s linear infinite; }
.fr-a_nebula { --ring: conic-gradient(#6a4bff, #ff5ec4, #4dd0ff, #6a4bff); } .fr-a_nebula::before { animation: x-spin 9s linear infinite; }
.fr-a_nebula::after { inset: -10px; background: conic-gradient(#0000 0 60deg, #ffffffa0 70deg, #0000 80deg 200deg, #ffffffa0 215deg, #0000 225deg); animation: x-spin-rev 6s linear infinite;
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 2px), #000 calc(100% - 1.5px)); mask: radial-gradient(farthest-side, #0000 calc(100% - 2px), #000 calc(100% - 1.5px)); }
.fr-a_prism { --ring: linear-gradient(135deg, #ffffff, #cfe0f5); }
/* Prism: a white crystal ring with a short beam of rainbow light sweeping around it (not a full rainbow ring, which is the Rainbow frame). */
.fr-a_prism::after { background: conic-gradient(#0000 0 292deg, #ff4d4d 302deg, #ffee4d 318deg, #4dff88 334deg, #4dc3ff 348deg, #9a4dff 358deg, #0000 360deg); animation: x-spin 3.2s linear infinite;
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 5px), #000 calc(100% - 4.5px)); mask: radial-gradient(farthest-side, #0000 calc(100% - 5px), #000 calc(100% - 4.5px)); }
.fr-a_diamond { --ring: repeating-conic-gradient(#e8fbff 0 22.5deg, #7ad8ff 22.5deg 45deg); } .fr-a_diamond::before { animation: x-spin 10s linear infinite; }
.fr-a_diamond::after { background: conic-gradient(#0000 0 340deg, #ffffff 352deg, #0000 360deg); animation: x-spin 3s linear infinite;
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 5px), #000 calc(100% - 4.5px)); mask: radial-gradient(farthest-side, #0000 calc(100% - 5px), #000 calc(100% - 4.5px)); }
.fr-a_goldleaf { --ring: conic-gradient(#fff2a8, #ffc933, #b8860b, #ffc933, #fff2a8); } .fr-a_goldleaf::before { animation: x-spin 10s linear infinite; }
.fr-a_goldleaf::after { background: conic-gradient(#0000 0 335deg, #ffffffe0 348deg, #0000 360deg); animation: x-spin-rev 4s linear infinite;
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 5px), #000 calc(100% - 4.5px)); mask: radial-gradient(farthest-side, #0000 calc(100% - 5px), #000 calc(100% - 4.5px)); }
@media (prefers-reduced-motion: reduce) { [class*="fr-a_"]::before, [class*="fr-a_"]::after { animation: none !important; } }

/* ===================================================================================
   Name colours. Plain colours are one solid shade; g_* are animated gradients that slide across the name.
   =================================================================================== */
.nc-red { color: #ff5560 !important; } .nc-white { color: #f4f6f8 !important; } .nc-blue { color: #5aa2ff !important; } .nc-green { color: #4fe08a !important; }
.nc-orange { color: #ff9a4d !important; } .nc-yellow { color: #ffe14a !important; } .nc-pink { color: #ff7eb6 !important; } .nc-purple { color: #a98bff !important; }
.nc-cyan { color: #3de8ff !important; } .nc-grey { color: #aeb6bd !important; } .nc-teal { color: #2fd0c0 !important; } .nc-crimson { color: #e03a5a !important; }
.nc-indigo { color: #7d86ff !important; } .nc-olive { color: #c7d05a !important; } .nc-sand { color: #e8d3a2 !important; } .nc-rosewater { color: #ffb8c6 !important; }
.nc-forest { color: #52c27a !important; }
.nc-black { color: #0b0b0d !important; -webkit-text-stroke: .7px #ffffffd9; paint-order: stroke fill; }
[class*="nc-g_"] { background-image: var(--g, linear-gradient(90deg, #fff, #fff)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent !important; color: transparent !important; animation: nc-slide 4s linear infinite; }
.nc-g_sunrise { --g: linear-gradient(90deg, #ffb347, #ff5e8a, #ffb347); } .nc-g_jungle { --g: linear-gradient(90deg, #3dd68c, #b6f23a, #3dd68c); }
.nc-g_cotton { --g: linear-gradient(90deg, #ff9ad5, #8ad4ff, #ff9ad5); } .nc-g_steel { --g: linear-gradient(90deg, #9aa3ab, #e6ebef, #9aa3ab); }
.nc-g_copper { --g: linear-gradient(90deg, #e0925a, #ffd0a8, #b86a34, #e0925a); } .nc-g_sapphire { --g: linear-gradient(90deg, #3d7bff, #7ad0ff, #3d7bff); }
.nc-g_ruby { --g: linear-gradient(90deg, #ff3b5c, #ff9ab0, #d1183a, #ff3b5c); } .nc-g_emerald { --g: linear-gradient(90deg, #1fcf7a, #a6ffd0, #14a35c, #1fcf7a); }
.nc-g_amethyst { --g: linear-gradient(90deg, #a55cff, #e0baff, #7a33d6, #a55cff); } .nc-g_neonpink { --g: linear-gradient(90deg, #ff2e97, #ff9ad5, #ff2e97); }
.nc-g_neonblue { --g: linear-gradient(90deg, #2e9bff, #9ae0ff, #2e9bff); } .nc-g_neongreen { --g: linear-gradient(90deg, #39ff88, #c4ffd9, #39ff88); }
.nc-g_storm { --g: linear-gradient(90deg, #5b6b8a, #c9d6ee, #5b6b8a); } .nc-g_magma { --g: linear-gradient(90deg, #ff2a1a, #ff8a1f, #ffd24a, #ff8a1f, #ff2a1a); animation-duration: 2.6s; }
.nc-g_mermaid { --g: linear-gradient(90deg, #35e0c8, #6a8bff, #c46aff, #35e0c8); } .nc-g_chrome { --g: linear-gradient(90deg, #8f979e, #ffffff, #8f979e, #ffffff, #8f979e); animation-duration: 2.2s; }
.nc-g_rainbow { --g: linear-gradient(90deg, #ff4d4d, #ffb84d, #ffee4d, #4dff88, #4dc3ff, #9a4dff, #ff4d4d); animation-duration: 3.2s; }
.nc-g_holo { --g: linear-gradient(90deg, #7affe3, #7a8bff, #ff7aef, #ffe27a, #7affe3); animation-duration: 2.8s; }
.nc-g_goldleaf { --g: linear-gradient(90deg, #fff2a8, #ffc933, #b8860b, #ffc933, #fff2a8); } .nc-g_diamond { --g: linear-gradient(90deg, #c4f4ff, #ffffff, #7ad8ff, #ffffff, #c4f4ff); animation-duration: 2.4s; }
.nc-g_galaxy { --g: linear-gradient(90deg, #6a4bff, #ff5ec4, #4dd0ff, #6a4bff); animation-duration: 5s; }
.nc-g_inferno { --g: linear-gradient(90deg, #ff3d1f, #ffd24a, #ff3d1f, #ff8a1f, #ff3d1f); animation-duration: 2.2s; }
@media (prefers-reduced-motion: reduce) { [class*="nc-g_"] { animation: none; } }

/* Phones: the GBUCKS label is longer than the old GAME label, so give the unit switch the room it needs. */
@media (max-width: 760px) { .wallet-swap { width: 60px !important; padding: 0 4px !important; } .wallet-swap span { letter-spacing: 0 !important; font-size: 9.5px !important; } }

/* The 1v1 tag on Tic Tac Toe is blue (the site accent), not the orange used for limited-time games. */
.nav-badge.blue { background: #4d8ee7; color: #fff; }
.tile-badge.blue, .game-tile .tile-badge.blue { background: #4d8ee7; color: #fff; box-shadow: 0 2px 0 #2a5c9f; }

/* Tic Tac Toe card: on hover the board replays itself, marks pop in one by one and a winning line is drawn through the X's */
.game-tile[data-game="tic-tac-toe"] .tile-art path, .game-tile[data-game="tic-tac-toe"] .tile-art circle { transform-box: fill-box; transform-origin: center; }
.game-tile[data-game="tic-tac-toe"]:hover .tile-art g[stroke="#4d8ee7"] path { animation: ttt-card-pop 2.6s cubic-bezier(.3, 1.6, .5, 1) infinite both; }
.game-tile[data-game="tic-tac-toe"]:hover .tile-art g[stroke="#4d8ee7"] path:nth-child(2) { animation-delay: .5s; }
.game-tile[data-game="tic-tac-toe"]:hover .tile-art g[stroke="#4d8ee7"] path:nth-child(3) { animation-delay: .1s; }
.game-tile[data-game="tic-tac-toe"]:hover .tile-art g[stroke="#f2c14e"] circle { animation: ttt-card-pop 2.6s cubic-bezier(.3, 1.6, .5, 1) infinite both; }
.game-tile[data-game="tic-tac-toe"]:hover .tile-art g[stroke="#f2c14e"] circle:nth-child(1) { animation-delay: .2s; }
.game-tile[data-game="tic-tac-toe"]:hover .tile-art g[stroke="#f2c14e"] circle:nth-child(2) { animation-delay: .3s; }
.game-tile[data-game="tic-tac-toe"]:hover .tile-art g[stroke="#f2c14e"] circle:nth-child(3) { animation-delay: .4s; }
.game-tile[data-game="tic-tac-toe"]:hover .tile-art .ttt-win { stroke-dasharray: 100; animation: ttt-card-win 2.6s ease-in-out infinite both; }
@keyframes ttt-card-pop { 0% { transform: scale(0); opacity: 0; } 12%, 85% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@keyframes ttt-card-win { 0%, 55% { stroke-dashoffset: 100; opacity: 0; } 56% { opacity: 1; } 75%, 88% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .game-tile[data-game="tic-tac-toe"]:hover .tile-art * { animation: none !important; } }

/* Uno card: three cards fanned, they spread wider and the front one lifts on hover (also used in the live-wins strip) */
.tile-art .uno-c { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.tile-art .uno-c1 { transform: rotate(-14deg); } .tile-art .uno-c3 { transform: rotate(14deg); }
.game-tile[data-game="uno"]:hover .tile-art .uno-c1 { transform: translateX(-5px) rotate(-24deg); }
.game-tile[data-game="uno"]:hover .tile-art .uno-c3 { transform: translateX(5px) rotate(24deg); }
.game-tile[data-game="uno"]:hover .tile-art .uno-c2 { transform: translateY(-5px) scale(1.05); }
@media (prefers-reduced-motion: reduce) { .tile-art .uno-c { transition: none; } }

/* Collapsed sidebar: a tidy rail of equal rounded squares, every icon the same size and centred. */
@media (min-width: 761px) {
  body.sb-collapsed .sidebar { width: 72px !important; padding: 12px 13px 16px; align-items: center; }
  body.sb-collapsed .sidebar .nav-group, body.sb-collapsed .sidebar .nav-section-body > div { justify-items: center; gap: 4px; }
  body.sb-collapsed .sidebar .nav-link, body.sb-collapsed .nav-section-head { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; min-height: 46px; padding: 0 !important; gap: 0; border-radius: 12px; }
  body.sb-collapsed .nav-section { margin-bottom: 4px; border: 0; background: transparent; }
  body.sb-collapsed .sidebar .nav-link .nav-ico, body.sb-collapsed .sidebar .nav-link .nav-coin, body.sb-collapsed .nav-section-head .nav-ico { display: grid; place-items: center; width: 22px; height: 22px; margin: 0; overflow: hidden; }
  body.sb-collapsed .sidebar .nav-link .nav-ico svg, body.sb-collapsed .sidebar .nav-link .nav-ico img { max-width: 100%; max-height: 100%; }
  body.sb-collapsed .sidebar .nav-link.active { border-color: transparent; background: #25344a; }
  body.sb-collapsed .nav-divider { width: 26px; margin: 10px auto; }
}
@media (min-width: 761px) {
  body.sb-collapsed .sidebar .nav-link.active, body.sb-collapsed .nav-section-head.active { border-color: transparent; background: #2b3036; color: #fff; }
}

/* ===== Phone polish (final word; everything below only applies on small screens) ===== */
@media (max-width: 760px) {
  html, body { overflow-x: hidden; max-width: 100%; }
  .topbar { gap: 6px !important; padding: 0 8px !important; }
  .menu-toggle { width: 36px !important; height: 36px !important; flex: none; }
  .topbar-right { gap: 4px !important; }
  .topbar-right .header-action-wrap, .tip-trigger, .bonus-trigger, .dm-top, .notification-button, .notification-wrap { width: 34px !important; height: 34px !important; min-width: 0; }
  .avatar-button:not(.login-button) { width: 34px !important; height: 34px !important; }
  .wallet-center-wrap { flex: 1 1 auto !important; min-width: 0 !important; gap: 3px !important; padding: 3px !important; margin: 0 !important; justify-content: flex-start !important; overflow: hidden; }
  .wallet-swap { width: 46px !important; height: 34px !important; padding: 0 !important; gap: 1px !important; }
  .wallet-swap span { font-size: 8.5px !important; }
  .top-wallet { flex: 1 1 auto; min-width: 0 !important; height: 34px !important; min-height: 34px !important; padding: 0 6px !important; gap: 5px !important; border-radius: 9px !important; border: 0 !important; overflow: hidden; font-size: 14px !important; }
  .top-wallet .wallet-icon { flex: none; width: 17px !important; height: 17px !important; }
  .top-wallet #top-balance { overflow: hidden; text-overflow: ellipsis; }
  .wallet-add { flex: none; width: 34px; height: 34px !important; min-height: 34px !important; padding: 0 !important; display: grid; place-items: center; }
}
@media (max-width: 400px) { .topbar .login-button { padding: 0 12px; font-size: 13px; } }
@media (max-width: 430px) { .wallet-add { display: none !important; } .top-wallet { padding: 0 8px !important; } }
@media (max-width: 640px) {
  .credit-custom { grid-template-columns: minmax(0, 1fr) auto; padding: 16px; }
  .cc-field { min-width: 0; } .cc-total { min-width: 0; }
}

/* Touch devices: no zoom-on-focus, no grey tap flash, no double-tap delay, no sticky hover lifts. */
@media (hover: none), (max-width: 760px) {
  * { -webkit-tap-highlight-color: transparent; }
  button, a, [role="button"], select, label, summary { touch-action: manipulation; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select { font-size: 16px !important; }
  html { -webkit-text-size-adjust: 100%; }
  body { padding-bottom: env(safe-area-inset-bottom); }
  .topbar { padding-top: env(safe-area-inset-top); }
}
@media (hover: none) {
  .acc-card:hover, .lang-grid button:hover, .game-tile:hover, .lw-card:hover, .uno-pick-btn:hover { transform: none; }
  button.uno-card.playable:hover { transform: none; box-shadow: inset 0 0 0 3px #fff, 0 4px 0 #0b0c0e; }
  .uno-hand.mine button.uno-card.playable:hover { transform: translateY(-8px); }
}

/* Phone, signed out: just menu, logo and one tidy Log in button (no empty balance pill, no dead icons). */
@media (max-width: 760px) {
  .topbar:has(.login-button) .wallet-center-wrap,
  .topbar:has(.login-button) .dm-top,
  .topbar:has(.login-button) .notification-wrap,
  .topbar:has(.login-button) .virtual-credit-action { display: none !important; }
  .topbar:has(.login-button) .brand { display: block !important; margin: 0 auto 0 2px; }
  .topbar:has(.login-button) .brand-name strong { font-size: 18px; }
  .topbar:has(.login-button) .brand-name span { font-size: 15.5px; }
  .topbar:has(.login-button) .topbar-right { margin-left: auto; }
  .avatar-button.login-button { width: auto !important; min-width: 0 !important; height: 36px !important; margin: 0 !important; padding: 0 16px !important; white-space: nowrap; border-radius: 10px; font: 700 14px var(--body) !important; line-height: 1; }
}
@media (max-width: 760px) {
  .topbar:has(.login-button) .topbar-right .header-action-wrap:not(.profile-wrap) { display: none !important; }
  .topbar:has(.login-button) .profile-wrap { width: auto !important; height: auto !important; }
}
@media (max-width: 760px) { .topbar:has(.login-button) .topbar-right > :not(.profile-wrap) { display: none !important; } }
@media (max-width: 760px) { .topbar:has(.login-button) .topbar-right > .virtual-credit-action:has(#bonus-trigger) { display: none !important; } }

/* Create account: flat like the Google button right under it, not a raised block. */
.email-auth-form #email-auth-mode { height: 46px; margin-top: 10px; border: 1px solid #2d333a; border-radius: 10px; background: #252a30; box-shadow: none; color: #e6e9ec; font: 700 14px var(--body); }
.email-auth-form #email-auth-mode:hover { background: #2c3238; color: #fff; transform: none; box-shadow: none; }
.email-auth-form #email-auth-mode:active { transform: none; background: #20252a; box-shadow: none; }

/* Sign-in dialog: the same 10px between Sign in, Create an account and Google. */
.auth-dialog .email-auth-form { gap: 0; padding-bottom: 0; margin-bottom: 0; }
.auth-dialog .email-auth-form #email-auth-submit { margin-top: 16px; }
.auth-dialog .email-auth-form #email-auth-mode { margin-top: 10px; margin-bottom: 0; }
.auth-dialog .google-signin { margin-top: 10px; }

/* Live wins: room around the cards so the hover lift and shadow are never clipped at the sides. */
.lw-track { margin: -10px -10px 0; padding: 12px 10px 14px; }
.lw-card { will-change: transform; }

/* Sign-in dialog: Sign in, Google, then "Create an account" as a plain text link. */
.auth-dialog[open] { display: flex; flex-direction: column; }
.auth-dialog .email-auth-form { display: contents; }
.auth-dialog .email-auth-form > label { order: 0; }
.auth-dialog #email-auth-submit { order: 1; margin-top: 16px; }
.auth-dialog .google-signin { order: 2; margin-top: 12px; border: 1px solid #3a4148; background: #2a2f35; color: #fff; box-shadow: 0 4px 0 #0b0d0f, inset 0 1px 0 #ffffff14; transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.auth-dialog .google-signin::before { display: none; }
.auth-dialog .google-signin:hover, .auth-dialog .google-signin:focus-visible { background: #343a41; color: #fff; border-color: #444c54; transform: translateY(-1px); box-shadow: 0 5px 0 #0b0d0f, inset 0 1px 0 #ffffff1a; }
.auth-dialog .google-signin:active { transform: translateY(3px); box-shadow: 0 1px 0 #0b0d0f; }
.auth-dialog .auth-error { order: 3; }
.auth-dialog .email-auth-form #email-auth-mode { order: 4; height: auto; min-height: 40px; margin: 10px auto 0; padding: 8px 12px; border: 0; background: transparent; box-shadow: none; color: #8fb8ee; font: 600 14px var(--body); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #8fb8ee66; }
.auth-dialog .email-auth-form #email-auth-mode:hover { background: transparent; color: #fff; text-decoration-color: #fff; transform: none; box-shadow: none; }
.auth-dialog .email-auth-form #email-auth-mode:active { background: transparent; transform: none; box-shadow: none; }


/* Language picker: with eleven languages the dialog scrolls instead of running off small screens. */
.lang-dialog { max-height: calc(100vh - 30px); overflow-y: auto; }
.lang-grid button b { overflow-wrap: anywhere; }

/* Home promo tiles: let the small line wrap to two lines instead of cutting it off with "…". */
.home-promo span:not(.promo-tag) { white-space: normal; overflow: visible; text-overflow: clip; display: block; line-height: 1.3; }

/* Lilita One has no Cyrillic or CJK letters. Give those scripts a heavy local font so headings keep their weight in Russian, Japanese and Chinese. */
@font-face { font-family: "Lilita One"; font-style: normal; font-weight: 400; src: local("Arial Black"), local("Segoe UI Black"), local("Helvetica Neue Bold"), local("Arial Bold"), local("Roboto Black"); unicode-range: U+0400-04FF, U+0500-052F; }
@font-face { font-family: "Lilita One"; font-style: normal; font-weight: 400; src: local("Yu Gothic UI Bold"), local("Yu Gothic Bold"), local("Hiragino Sans W8"), local("Microsoft YaHei UI Bold"), local("Microsoft YaHei Bold"), local("PingFang SC Semibold"), local("Noto Sans CJK JP Bold"), local("Noto Sans SC Bold"); unicode-range: U+3000-30FF, U+3400-4DBF, U+4E00-9FFF, U+FF00-FFEF; }

/* Live wins: hover animations stay, and the art may draw outside its own svg box so the Uno fan is never cut off. */
.lw-card .lw-icon, .lw-card .tile-art, .lw-card .tile-art * { overflow: visible; }
.lw-card:hover .tile-art { transform: translateY(-3px) scale(1.07) rotate(-2deg); }

/* Badges: the glyph always sits dead centre of its medal. */
.bdg-medal { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.bdg-medal svg { display: block; flex: none; margin: 0; }
.bdg-medal.mini, .lw-badge .bdg-medal { padding: 0 !important; }

/* Tablet widths: shop tabs wrap instead of running off the page, and the custom-credits row shrinks to fit. */
@media (min-width: 761px) and (max-width: 1100px) {
  .hs-tabs { flex-wrap: wrap; width: 100%; }
  .credit-custom { grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto; gap: 12px 14px; padding: 16px 18px; }
  .credit-custom .credit-button { width: 140px; }
  .cc-total { min-width: 0; }
}
.hs-tabs { flex-wrap: wrap; max-width: 100%; }