.topbar nav{gap:18px}.topbar nav .rewards-nav-link{position:relative;display:inline-flex;align-items:center;gap:7px;padding:9px 4px;font-weight:750;white-space:nowrap}.rewards-nav-link>span:first-child{font-size:23px;color:#eac780;line-height:1}.task-notification{position:absolute;right:-3px;top:3px;width:9px;height:9px;background:#f3635d;border:2px solid #203226;border-radius:50%;box-shadow:0 0 8px #f3635d66}.task-notification[hidden]{display:none}
.account-earn-link{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:15px 0 0;margin-top:18px;border-top:1px solid #c5bb8133;font-weight:700;color:#e8cb89;text-decoration:none}.account-earn-link small{color:#b6c6ab;font-size:13px;font-weight:400}.reward-task-result{border:1px solid #a3b77366;background:linear-gradient(115deg,#4c552c55,#14291f);border-radius:13px;margin:14px 0;padding:20px}.reward-task-result>strong{display:block;color:#f4d190;font-size:20px}.reward-task-result p{font-size:14px;color:#b9cbb6;margin:10px 0}.reward-task-result a{display:inline-block;padding:10px 18px;border:1px solid #d6b068;border-radius:8px;background:#e5c16e22;color:#f4d390;font-weight:750}.sat-ledger b.is-spend{color:#aebed1}
@media(max-width:1400px){.topbar nav{gap:12px}.topbar nav .rewards-nav-link{font-size:13px;gap:5px}.rewards-nav-link>span:first-child{font-size:20px}.account-nav-copy strong{max-width:115px}}
@media(max-width:1050px){.topbar nav{gap:9px}.rewards-nav-link .rewards-nav-text{display:none}.topbar nav .rewards-nav-link{padding:8px 6px}.topbar nav .rewards-nav-link>span:first-child{font-size:24px}.task-notification{right:1px;top:1px}}
@media(max-width:620px) and (orientation:portrait){.topbar:has(#tasksLink){height:auto!important;min-height:112px;padding:10px 12px;gap:9px;flex-wrap:wrap}.topbar:has(#tasksLink) .brand{flex-basis:100%}.topbar:has(#tasksLink) nav{width:100%;max-width:100%;gap:8px;justify-content:space-between}.topbar:has(#tasksLink) .account-toplink.has-profile{padding:3px 5px;gap:4px;min-height:38px}.topbar:has(#tasksLink) .account-nav-copy{display:none}.topbar:has(#tasksLink) .account-nav-arrow{display:none}.topbar:has(#tasksLink) .account-nav-avatar{width:29px;height:29px}.topbar:has(#tasksLink) #accountLink{margin:0}.topbar:has(#tasksLink) .rewards-nav-link{padding:7px 4px}.topbar:has(#tasksLink) #settingsBtn,.topbar:has(#tasksLink) #leaderboardLink{font-size:11px;white-space:nowrap;padding:7px 0}}
@media(orientation:landscape) and (max-height:600px){body:has(.game-table) .topbar nav{gap:11px}body:has(.game-table) .topbar nav .rewards-nav-link{padding:2px 4px}body:has(.game-table) .topbar nav .rewards-nav-link>span:first-child{font-size:19px}.task-notification{width:8px;height:8px}}
@media(min-width:621px) and (max-width:1050px){body:not(:has(.game-table)) .topbar:has(#tasksLink) .brand{font-size:17px;letter-spacing:1px;white-space:nowrap;flex-shrink:0;gap:8px}body:not(:has(.game-table)) .topbar:has(#tasksLink) .brand small{font-size:7px;letter-spacing:1.6px;white-space:nowrap}body:not(:has(.game-table)) .topbar:has(#tasksLink){gap:16px}body:not(:has(.game-table)) .topbar:has(#tasksLink) .brand-icon{width:35px;height:35px;font-size:25px}}

/* Mid-width desktop windows (e.g. a resized Telegram Desktop Mini App window, ~1050-1240px):
   keep the logo on one line and drop the version badge and text labels before anything wraps. */
.topbar .brand{white-space:nowrap;flex-shrink:0}
.topbar .brand small{white-space:nowrap}
.topbar .edition{white-space:nowrap;flex-shrink:0}
@media (max-width:1240px){
 .topbar .edition{display:none}
 .topbar .rewards-nav-link .rewards-nav-text{display:none}
 .topbar nav .rewards-nav-link{padding:8px 6px}
}